Thành phần View trong AngularJS

AngularJS hỗ trợ Single Page Application thông qua multiple view trên một trang đơn. Để làm được điều này, AngularJS cung cấp ng-view và ng-template directive và $routeProvider service.

Giới thiệu ng-view trong AngularJS

Thẻ ng-view đơn giản là tạo nơi giữ các màn hình view tương ứng có thể được đặt trong nó dựa vào cấu hình.

Cách sử dụng

Định nghĩa thẻ div với ng-view trong module chính.

...
   
    

Giới thiệu ng-template trong AngularJS

ng-template directive được sử dụng để tạo ra các HTML view sử dụng thẻ script. Nó chứa thuộc tính "id" được sử dụng bởi $routeProvider để liên kết view và controller.

Cách sử dụng

Định nghĩa một khối script với kiểu như ng-template trong module chính.

...
   
    

Giới thiệu $routeProvider trong AngularJS

Là dịch vụ chính trong việc tạo các cấu hình cho địa chỉ URL, liên kết chúng với trang HTML tương ứng hoặc ng-template và gắn controller với chúng.

Cách sử dụng

Định nghĩa một khối script trong module chính và thiết lập cấu hình định tuyến.

 var ungdungAngularJS = angular.module("ungdungAngularJS", ['ngRoute']);
      
      ungdungAngularJS.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/themSV', {
                  templateUrl: 'themSV.html',
                  controller: 'themSVController'
               }).
               when('/quansatSV', {
                  templateUrl: 'quansatSV.html',
                  controller: 'quansatSVController'
               }).
               otherwise({
                  redirectTo: '/themSV'
               });
         }]);
    

Dưới đây là những điểm quan trọng cần xem xét từ ví dụ trên.

• $routeProvider định nghĩa là một hàm dưới config của ungdungAngularJS module sử dụng khóa là "$routeProvider".

• $routeProvider.when định nghĩa một địa chỉ URL "/themSV" được sử dụng để liên kết đến trang "themSV.html", trong đó themSV.html nên đặt chung thư mục đường dẫn với trang HTML. Nếu trang HTML không được định nghĩa, ng-template sẽ sử dụng id="themSV.html". Chúng ta sử dụng ng-template.

• "otherwise" được sử dụng để thiết lập view mặc định.

• "controller" được để thiết lập controller tương ứng với từng view.

Ví dụ

Dưới đây là ví dụ minh họa cho những directive mô tả bên trên.

   
   
   


   
Ung dung AngularJS
   

      
Them sinh vien
      
Quan sat sinh vien
      

      
      	
   
   

Kết quả

Mở trang thanhphanView.html trên trình duyệt web và bạn sẽ thấy kết quả sau.