Các ngRoutemô-đun giúp ứng dụng của bạn để trở thành một trang duy nhất ứng dụng.
Routing 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.
Các ngRoutemô-đun tuyến ứng dụng của bạn vào các trang web khác nhau mà không 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 $routeProvidercá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>
Bản 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>"
});
});