/ / / / / การใช้ Modules ใน AngularJS

การใช้ Modules ใน AngularJS

, , , Edit
ใน AngularJS รองรับการทำงานในลักษณะของ Module โดยตัว Module นั้นทำหน้าที่แยกลอจิกการทำงานของ services, controllers, application และอื่นๆ นอกจากนั้นยังทำให้โคดดูสะอาด เพราะเราสามารถแยก Modules ออกเป็นไฟล์ได้ด้วย

ตัวอย่างกรณี Module อยู่ในไฟล์เดียวกับ controller
?
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
    <table border="0">
        <tbody>
            <tr>
                <td>Enter first name:</td>
                <td>
                    <input ng-model="student.firstName" type="text">
                </td>
            </tr>
            <tr>
                <td>Enter last name: </td>
                <td>
                    <input ng-model="student.lastName" type="text">
                </td>
            </tr>
            <tr>
                <td>Name: </td>
                <td>{{student.fullName()}}</td>
            </tr>
            <tr>
                <td>Subject:</td>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <th>Name</th>
                                <th>Marks</th>
                            </tr>
                            <tr ng-repeat="subject in student.subjects">
                                <td>{{ subject.name }}</td>
                                <td>{{ subject.marks }}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<style>
table,
th,
td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
 
table tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
table tr:nth-child(even) {
    background-color: #ffffff;
}
</style>
<script>
var mainApp = angular.module("mainApp", []);
 
mainApp.controller('studentController', function($scope) {
    $scope.student = {
        firstName: "Nopphanan",
        lastName: "Mayoe",
        fees: 500,
 
        subjects: [{
            name: 'Physics',
            marks: 70
        }, {
            name: 'Chemistry',
            marks: 80
        }, {
            name: 'Math',
            marks: 65
        }, {
            name: 'English',
            marks: 75
        }, {
            name: 'Hindi',
            marks: 67
        }],
 
        fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
        }
    };
});
</script>
ตัวอย่างกรณี Module อยู่คนละไฟล์กับ controller
?
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<title>Angular JS Modules</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="/angularjs/src/module/mainApp.js"></script>
<script src="/angularjs/src/module/studentController.js"></script>
<style>
table,
th,
td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
 
table tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
table tr:nth-child(even) {
    background-color: #ffffff;
}
</style>
 
 
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
    <table border="0">
        <tbody><tr>
            <td>Enter first name:</td>
            <td>
                <input ng-model="student.firstName" type="text">
            </td>
        </tr>
        <tr>
            <td>Enter last name: </td>
            <td>
                <input ng-model="student.lastName" type="text">
            </td>
        </tr>
        <tr>
            <td>Name: </td>
            <td>{{student.fullName()}}</td>
        </tr>
        <tr>
            <td>Subject:</td>
            <td>
                <table>
                    <tbody><tr>
                        <th>Name</th>
                        <th>Marks</th>
                    </tr>
                    <tr ng-repeat="subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                    </tr>
                </tbody></table>
            </td>
        </tr>
    </tbody></table>
</div>
โดยที่ไฟล์ mainApp.js เก็บโคดดังนี้
?
1
var mainApp = angular.module("mainApp", []);
และไฟล์ studentController.js เก็บโคดดังนี้
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Nopphanan",
      lastName: "Mayoe",
      fees:500,
       
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
       
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});
ผลลัพธ์ของโคดที่ได้เหมือนกันดังรูป

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )