Định tuyến AngularJS
Mô ngRoute-đun giúp ứng dụng của bạn trở thành Ứng dụng Trang Đơn.
Đị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à một SPA (Ứng dụng trang đơn), không cần tải lại trang, bạn có thể sử dụng ngRoutemô-đun.
Mô ngRoute-đun đị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.
Thí 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>
Tôi cần những gì?
Để làm cho các ứng dụng của bạn sẵn sàng cho việc định tuyến, bạn phải bao gồm mô-đun AngularJS Route:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Sau đó, bạn phải thêm ngRoutedưới dạng 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 định tuyến, mô-đun này cung cấp $routeProvider.
Sử dụng $routeProviderđể định cấu hình các tuyến đường 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 để đưa nội dung được cung cấp bởi định tuyến.
Vùng chứa này là ng-viewchỉ thị.
Có ba cách khác nhau để đưa ng-viewchỉ thị vào đơn đăng ký của bạn:
Thí dụ:
<div ng-view></div>
Thí dụ:
<ng-view></ng-view>
Thí dụ:
<div
class="ng-view"></div>
Các ứng dụng chỉ có thể có một ng-viewchỉ thị và đây sẽ là trình giữ chỗ cho tất cả các chế độ xem được cung cấp bởi tuyến đường.
$ routeProvider
Với $routeProviderbạ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.
Thí dụ:
Xác định một $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"
});
});
Xác định $routeProviderbằng cách sử dụng configphương pháp của ứng dụng của bạn. Công việc đã đăng ký trong configphương thức sẽ được thực hiện khi ứng dụng đang tải.
Bộ điều khiển
Với $routeProviderbạn cũng có thể xác định một bộ điều khiển cho mỗi "chế độ xem".
Thí 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";
});
"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 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>
Mẫu
Trong các ví dụ trước, chúng ta đã sử dụng thuộc templateUrltính trong
$routeProvider.whenphương thức.
Bạn cũng có thể sử dụng thuộc templatetính, cho phép bạn viết HTML trực tiếp trong giá trị thuộc tính và không tham chiếu đến một trang.
Thí dụ:
Viết các 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>"
});
});
Phương pháp khác
Trong các ví dụ trước, chúng tôi đã sử dụng whenphương thức của $routeProvider.
Bạn cũng có thể sử dụng otherwisephương pháp này, đây là đường dẫn mặc định khi không có phương thức nào khác khớp.
Thí dụ:
Nếu cả liên kết "Banana" và "Tomato" đề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>"
});
});