- 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#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
0 comments:
Post a Comment