Định tuyến AngularJS
Mô-đun ngRoute giúp ứng dụng của bạn trở thành Ứng dụng một trang.
Định tuyến trong AngularJS là gì?
Nếu bạn muốn điều hướng đến các trang khác nhau trong ứng dụng của mình, nhưng bạn cũng muốn ứng dụng đó là SPA (Ứng dụng một trang), không cần tải lại trang, bạn có thể sử dụng mô-đun ngRoute .
Mô-đun ngRoute định tuyến ứng dụng của bạn đến các trang khác nhau mà không cần tải lại toàn bộ ứng dụng.
Ví dụ:
Điều hướng đến "red.htm", "green.htm" và "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
Hãy tự mình thử » Tôi cần những gì?
Để làm cho các ứng dụng của bạn sẵn sàng định tuyến, bạn phải bao gồm mô-đun Tuyến đường AngularJS:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script> Sau đó, bạn phải thêm ngRoute làm phần phụ thuộc trong mô-đun ứng dụng:
var app = angular.module("myApp", ["ngRoute"]); Bây giờ ứng dụng của bạn có quyền truy cập vào mô-đun tuyến đường cung cấp $routeProvider .
Sử dụng $routeProvider để định cấu hình các tuyến khác nhau trong ứng dụng của bạn:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Nó đi đâu?
Ứng dụng của bạn cần một vùng chứa để đặt nội dung do định tuyến cung cấp.
Vùng chứa này là lệnh ng-view .
Có ba cách khác nhau để đưa lệnh ng-view vào ứng dụng của bạn:
Các ứng dụng chỉ có thể có một lệnh ng-view và đây sẽ là phần giữ chỗ cho tất cả các chế độ xem do tuyến đường cung cấp.
$routeProvider
Với $routeProvider bạn có thể xác định trang nào sẽ hiển thị khi người dùng nhấp vào liên kết.
Ví dụ:
Xác định $routeProvider :
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
Hãy tự mình thử » Xác định $routeProvider bằng phương thức config của ứng dụng của bạn. Công việc được đăng ký trong phương thức config sẽ được thực hiện khi ứng dụng đang tải.
Bộ điều khiển
Với $routeProvider , bạn cũng có thể xác định bộ điều khiển cho mỗi "chế độ xem".
Ví dụ:
Thêm bộ điều khiển:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
Hãy tự mình thử »"london.htm" và "paris.htm" là các tệp HTML thông thường, bạn có thể thêm các biểu thức AngularJS như cách bạn làm với bất kỳ phần HTML nào khác trong ứng dụng AngularJS của mình.
Các tập tin trông như thế này:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Bản mẫu
Trong các ví dụ trước, chúng ta đã sử dụng thuộc tính templateUrl trong phương thức $routeProvider.when .
Bạn cũng có thể sử dụng thuộc tính template , cho phép bạn viết HTML trực tiếp vào giá trị thuộc tính và không tham chiếu đến một trang.
Ví dụ:
Viết mẫu:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
Hãy tự mình thử »Phương pháp khác
Trong các ví dụ trước, chúng ta đã sử dụng phương thức when của $routeProvider .
Bạn cũng có thể sử dụng phương pháp otherwise , đây là phương pháp mặc định khi không có phương pháp nào khác phù hợp.
Ví dụ:
Nếu cả liên kết "Chuối" và "Cà chua" đều không được nhấp vào, hãy cho họ biết:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});
Hãy tự mình thử »