สิ่งที่ควรรู้

การพัฒนาโปรแกรมด้วย AngularJS Framework จะใช้โครงสร้างแบบ MVC

Controller คือ อะไร ?

ข้อมูลและฟังก์ชั่นต่างๆ จะถูกกำหนดไว้ใน Controller เพื่อให้ง่ายต่อการกำหนดขอบเขตของข้อมูลและฟังก์ชั่น

ลองเขียน Controller กันเถอะ

เราต้องการสร้างหน้าแสดงผลค่าของข้อมูลที่เอามาจาก Controller

1.สร้าง Controller เริ่มจากในไฟล์ js/app.js ทำการสร้าง Controller ชื่อ storeController โดยมีรายละเอียดดังนี้

?
1
2
3
4
5
6
7
8
(function () {
    'use strict'
     
    var app = angular.module('application', []);
     
    app.controller('storeController', function () {
    });
})();

2.กำหนดตัวแปรเก็บรายละเอียดข้อมูล ทำการกำหนดข้อมูลเพิ่มลงใน storeController โดยจะยกตัวอย่างเป็นข้อมูลซูชิหน้าปลามาคุโร่

?
6
7
8
9
10
11
12
app.controller('storeController', function () {
    this.sushi = {
        name: 'Maguro',
        price: 200,
        description: 'Fat tuna'
    };
});

3.กำหนดขอบเขตของ directive ในการที่เราจะเรียกใช้ข้อมูลหรือฟังก์ชั่นต่างๆใน Controller

จะต้องทำการกำหนด Directive ที่ชื่อว่า ng-controller ในไฟล์ sushistore.html เพื่อระบุขอบเขตข้อมูล

ng-controller="ชื่อของ Controller as ชื่อเรียกในส่วนนี้(Alias)"
?
9
10
11
12
13
14
15
16
17
<body>
    <div class="list-group">                  <!-- ชื่อของ Controller as ชื่อเรียกในส่วนนี้(Alias)-->
        <div class="list-group-item" ng-controller="storeController as store">
            <h1>Sushi's Name</h1>
            <h2>Sushi's Price<h2>
            <p>Sushi's Description<p>
        </div>
    </div>
...

จากนั้นใส่ข้อมูลซูชิลงไปให้ใส่ {{}} ครอบข้อมูลไว้ โดยการที่จะเข้าถึงข้อมูลนั้นเราต้องระบุ ชื่อตัวแปร

?
9
10
11
12
13
14
15
16
17
<body>
    <div class="list-group">                  <!-- ชื่อของ Controller as ชื่อเรียกในส่วนนี้(Alias)-->
        <div class="list-group-item" ng-controller="storeController as store">
            <h1>{{store.sushi.name}}</h1>
            <h2>{{store.sushi.price}} yen<h2>
            <p>{{store.sushi.description}}<p>
        </div>
    </div>
...

หากต้องการดูตัวอย่างให้เข้าลิงค์นี้ Demo

ตัวอย่างที่ผิด

ข้อมูลจะไม่สามารถใช้ได้หากประกาศภายนอกของ ng-controller อยู่

?
9
10
11
12
13
14
15
16
17
18
<body>
    <div class="list-group">                  <!-- ชื่อของ Controller as ชื่อเรียกในส่วนนี้(Alias)-->
        <div class="list-group-item" ng-controller="storeController as store">
            <h1>{{store.sushi.name}}</h1>
            <h2>{{store.sushi.price}} yen</h2>
            <p>{{store.sushi.description}}</p>
        </div>
        {{store.sushi.name}} <!-- ไม่สามารถใช้ได้เนื่องจากอยู่นอกขอบเขตของ storeController-->
    </div>
...

Challenge 2: The Best Sushi of Sushi Store

ในบรรดาซูชิทั้งหมดที่สุดของซูชิคือ ข้าวปั้นหน้ามาคุโร่ (Maguro)

ซึ่งคุณทานากะอยากให้ใส่เมนูนี้เป็นเมนูเด็ดประจำร้านของตัวเองจึงขอให้คุณทำเพิ่มซูชิให้

โดยคุณทานากะให้หน้าตาเว็บที่เขาอยากได้มีผลลัพธ์ดังลิงนี้ Demo

โดยมีโค้ดให้บางส่วน จงเติมส่วนที่ขาดหายไป เพื่อให้เว็บทำงานได้

ไฟล์ sushistore.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html ng-app="application">
<head>
    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- bootstrap theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
    <header>
      <h1 class="text-center">{{"Tanaka-San"}}'s Sushi Store</h1>
      <h2 class="text-center">Open Since {{10*200}}.</h2>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="list-group">
                    <div class="list-group-item">
                        <h1>Sushi Name</h1>
                        <h2>XXX yen</h2>
                        <p>Sushi Description</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
     
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/lib/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="js/lib/bootstrap.min.js"></script>
    <!-- AngularJS JavaScript -->
    <script src="js/lib/angular.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

ไฟล์ app.js

?
1
2
3
4
5
6
7
8
9
(function () {
    'use strict';
     
    var app = angular.module('application', []);
    app.controller('storeController', function () {
 
    });
     
})();