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.

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

</div>

Giới thiệu ng-template trong AngularJS

Quảng cáo

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.

<div ng-app="ungdungAngularJS">
...
   <script type="text/ng-template" id="themSV.html">
      <h2> Add Student </h2>
         {{message}}
   </script>

</div>

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ụ

Quảng cáo

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

thanhphanView.html

<html>
<head>
   <title>Vi du View trong Angular JS</title>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>
<body>
   <h2>Ung dung AngularJS</h2>
   <div ng-app="ungdungAngularJS">
      <p><a href="#themSV">Them sinh vien</a></p>
      <p><a href="#quansatSV">Quan sat sinh vien</a></p>
      <div ng-view></div>
      <script type="text/ng-template" id="themSV.html">
         <h2> Them sinh vien </h2>
         {{message}}
      </script>
      <script type="text/ng-template" id="quansatSV.html">
         <h2> Quan sat sinh vien </h2>	    
         {{message}}
      </script>	
   </div>

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

         ungdungAngularJS.controller('themSVController', function($scope) {
            $scope.message = "Trang nay se duoc su dung de hien thi mot form de them sinh vien";
         });

         ungdungAngularJS.controller('quansatSVController', function($scope) {
            $scope.message = "Trang nay se duoc su dung de quan sat tat ca sinh vien";
         });
   </script>
</body>
</html>

Kết quả

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

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học Angular phổ biến tại vietjack.com: