- Email contact@devpro.vn
- Hotline0985.95.08.95
AngularJS hỗ trợ Single Page Application thông qua view trên một trang duy nhất. Để thực hiện điều này, AngularJS đã cung cấp các chỉ thị ng-view và ng-template và các dịch vụ routeProvider $. Hôm nay chúng ta sẽ cùng tìm hiểu về thành phần View trong AngularJS nhé!.
ngView là một chỉ thị bổ sung cho dịch vụ định tuyến bằng cách bao gồm mẫu được kết xuất của tuyến hiện tại vào tệp layout chính. Mỗi khi tuyến hiện tại thay đổi, view sẽ thay đổi theo cấu hình của dịch vụ.index.html$route. Yêu cầu ngRoutemodule phải được cài đặt.
Sử dụng:
Xác định div với ng-view trong module chính.
<div ng-app = "mainApp">
...
<div ng-view></div>
</div>
Chỉ thị ng-template được sử dụng để tạo chế độ xem html bằng cách sử dụng thẻ tập lệnh. Nó chứa thuộc tính "id" được $ routeProvider sử dụng để ánh xạ một khung nhìn bằng một bộ điều khiển.
Sử dụng
Xác định một khối script với kiểu như ng-template trong module chính.
<div ng-app = "mainApp">
...
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>
$ routeProvider là dịch vụ chính thiết lập cấu hình các url, áp dụng chúng với trang html tương ứng hoặc ng-template và đính kèm một bộ điều khiển với nhau.
Sử dụng
Xác định một khối script với module 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'
});
}]);
Sau đây là những điểm quan trọng cần xem xét trong ví dụ trên.
$ routeProvider được định nghĩa là một hàm theo cấu hình của mô-đun mainApp sử dụng khóa là '$ routeProvider'.
$ routeProvider.when định nghĩa url "/ addStudent" mà sau đó được áp dụng tới "addStudent.htm". addStudent.htm nên có mặt trong cùng một đường dẫn như trang html chính.Nếu trang htm không được định nghĩa thì ng-template sẽ đượ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.
"bộ điều khiển" được sử dụng để đặt bộ điều khiển tương ứng cho chế độ xem.
Ví dụ sau sẽ giới thiệu 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>
Kết quả
Mở văn bản AngularJS.htm trong trình duyệt web. Xem kết quả.
