AngularJS - Lượt xem

AngularJS hỗ trợ Ứng dụng Trang đơn thông qua nhiều chế độ xem trên một trang duy nhất. Để làm được điều này, AngularJS đã cung cấp các chỉ thị ng-view và ng-template, và các dịch vụ $ routeProvider.

ng-view Chỉ thị

Chỉ thị ng-view chỉ đơn giản là tạo một trình lưu giữ nơi có thể đặt một khung nhìn tương ứng (HTML hoặc ng-template view) dựa trên cấu hình.

Sử dụng

Xác định một div với ng-view trong mô-đun chính.

<div ng-app = "mainApp">
   ...
   <div ng-view></div>

</div>

Chỉ thị ng-template

Lệnh ng-template được sử dụng để tạo dạng xem HTML bằng thẻ script. Nó chứa thuộc tính id được sử dụng bởi $ routeProvider để ánh xạ chế độ xem với bộ điều khiển.

Sử dụng

Xác định một khối script với kiểu là ng-template trong mô-đun chính.

<div ng-app = "mainApp">
   ...
	
   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>

</div>

$ routeProvider Service

$ RouteProvider là một dịch vụ chính đặt cấu hình URL, ánh xạ chúng với trang HTML hoặc ng-template tương ứng và đính kèm một bộ điều khiển với cùng một.

Cách sử dụng 1

Xác định một khối script với kiểu là ng-template trong mô-đun chính.

<div ng-app = "mainApp"> 
   ... 
   <script type = "text/ng-template" id = "addStudent.htm"> 
      <h2> Add Student </h2> 
      {{message}} 
   </script>  
</div>

Cách sử dụng 2

Xác định khối tập lệnh với mô-đun chính và thiết lập cấu hình định tuyến.

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'
   });
	
}]);

Các điểm sau đây rất quan trọng cần được xem xét trong ví dụ trên:

$ routeProvider được định nghĩa là một chức năng trong cấu hình của mô-đun mainApp sử dụng khóa là '$ routeProvider'.
$ routeProvider.w khi xác định một URL "/ addStudent", được ánh xạ tới "addStudent.htm". addStudent.htm phải có cùng đường dẫn với trang HTML chính. Nếu trang HTML không được xác định, thì ng-template cần được sử dụng với id = "addStudent.htm". Chúng tôi đã sử dụng ng-template.
"nếu không" được sử dụng để đặt chế độ xem mặc định.
"controller" được sử dụng để đặt bộ điều khiển tương ứng cho chế độ xem.

Thí dụ

Ví dụ sau cho thấy việc sử dụng tất cả các chỉ thị nêu trên.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
            <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>
      
   </body>
</html>

Đầu ra

Mở tệp testAngularJS.htm trong trình duyệt web và xem kết quả.