การใช้ Views ใน AngularJS

ใน AngularJS นั้นรองรับการทำงานในลักษณะของ Single Page Application คือจัดการทุกอย่างในหน้าจอเดียว และเพื่อการนั้นเราต้องมีการทำงานลักษณะของ Multi View ซึ่งเป็นลักษณะการที่งานที่เอาหลาย View มาอยู่ในหน้าจอเดียวกัน การที่จะทำงานในลักษณะดังกล่าวได้นั้น ใน AngularJS จะต้องใช้ ng-view directives, ng-template directives และ$routeProvider services โดยที่ :
  • ng-view directives : พื้นที่ที่ใช้แสดงข้อมูล
1
2
3
4
5
6
<div ng-app="mainApp" class="ng-scope">
    ...
    <script id="addStudent.htm" type="text/ng-template">
        <h2>Add Student </h2>{{message}}
    </script>
</div>
  • ng-template directives : ใช้สำหรับสร้าง HTML view โดยจะสร้างในลักษณะของ Script ที่ต้องมี script type เป็น text/ng-template และต้องมี script id เพื่อให้ $routeProvider ใช้อ้างอิงได้
1
2
3
4
5
6
<div ng-app="mainApp">
    ...
    <script id="addStudent.htm" type="text/ng-template">
        <h2>Add Student </h2>{{message}}
    </script>
</div>
  • $routeProvider : $routeProvider เป็นคีย์ service ใช้ตั้งค่าพวก urls จับคู่กับ html page หรือ ng-template เพื่อแสดงผล เพื่อกำหนดค่าการแสดงผลว่าผู้ใช้คลิกที่ไหนต้องแสดงหน้าจออะไร
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var mainApp = angular.module("mainApp", ['ngRoute']);
 
mainApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
 
    when('/addStudent', {
        templateUrl: 'addStudent.htm',
        controller: 'AddStudentController'
    }).
 
    when('/viewStudents', {
        templateUrl: 'viewStudents.htm',
        controller: 'ViewStudentsController'
    }).
 
    otherwise({
        redirectTo: '/addStudent'
    });
 
}]);
จุดที่ต้องพิจารณาจากตัวอย่างข้างบนคือ.
  • $routeProvider เป็นฟังก์ชั่นที่ถูกประกาศภายใน config ของ mainApp และใช้พารามิเตอร์ชื่อเดียวกันว่า '$routeProvider'.
  • $routeProvider เมื่อกำหนด url "/addStudent" ทำการจับคู่กับ "addStudent.htm". และตัว addStudent.htm ต้องมีไฟล์อยู่ที่เดียวกับหน้าหลัก ถ้าไฟล์ดังกล่าวไม่มีอยู่จริงระบบจะเรียก ng-template เพื่อเรียกใช้ id="addStudent.htm" ng-template ที่เรากำหนดไว้.
  • "otherwise" ใช้สหรับเชตค่า default view.
  • "controller" ค่าที่เชตเพื่อให้สอดคล้องกับ View นั้นๆ.
ตัวอย่าง
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
<title>Angular JS Views</title>
 
 
 
<h2><span>AngularJS Sample Application</span></h2>
<div ng-app="mainApp">
    <a href="https://www.blogger.com/blogger.g?blogID=1712132729649794123#addStudent">Add Student</a>
    <a href="https://www.blogger.com/blogger.g?blogID=1712132729649794123#viewStudents">View Students</a>
    <div ng-view="">
    </div>
    <script id="addStudent.htm" type="text/ng-template">
        <h2>Add Student </h2> {{message}}
    </script>
    <script id="viewStudents.htm" type="text/ng-template">
        <h2> View Students </h2> {{message}}
    </script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
 
    when('/addStudent', {
        templateUrl: 'addStudent.htm',
        controller: 'AddStudentController'
    }).
 
    when('/viewStudents', {
        templateUrl: 'viewStudents.htm',
        controller: 'ViewStudentsController'
    }).
 
    otherwise({
        redirectTo: '/addStudent'
    });
}]);
 
mainApp.controller('AddStudentController', function($scope) {
    $scope.message = "This page will be used to display add student form";
});
 
mainApp.controller('ViewStudentsController', function($scope) {
    $scope.message = "This page will be used to display all the students";
});
</script>
ผลลัพธ์
กรณีคลิก Add Student

กรณีคลิก View Student

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