Router AngularJS
- Trang trước Hoạt hình AngularJS
- Trang tiếp theo Ứng dụng AngularJS
ngRoute Mô-đun giúp ứng dụng của bạn trở thành ứng dụng trang duy nhất.
Điều gì là định tuyến trong AngularJS?
Nếu bạn muốn chuyển hướng đến các trang khác trong ứng dụng nhưng cũng muốn ứng dụng trở thành SPA (ứng dụng trang duy nhất) và không có việc tải lại trang, bạn có thể sử dụng ngRoute Mô-đun。
ngRoute Mô-đun sẽ định tuyến ứng dụng của bạn đến các trang khác mà không cần tải lại toàn bộ ứng dụng.
Mô hình
Chuyển hướng đến "red.htm", "green.htm" và "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">trang chủ</a></p>
<a href="#!red">đỏ</a>
<a href="#!green">xanh lục</a>
<a href="#!blue">xanh dương</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 gì?
Để làm cho ứng dụng của bạn sẵn sàng cho route, bạn phải bao gồm module Route của AngularJS:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Sau đó, bạn phải bao gồm ngRoute Thêm làm phụ thuộc trong module ứng dụng:
var app = angular.module("myApp", ["ngRoute"]);
Bây giờ ứng dụng của bạn có thể truy cập các route cung cấp $routeProvider module route.
Vui lòng sử dụng $routeProvider Cấu hình các route khác nhau trong ứng dụng:
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 rồi?
Ứng dụng của bạn cần một thiết bị để đặt nội dung mà route cung cấp.
Thiết bị này là ng-view .
Có thể bao gồm hướng dẫn trong ứng dụng bằng ba cách khác nhau. ng-view hướng dẫn:
Mô hình
<div ng-view></div>
Mô hình
<ng-view></ng-view>
Mô hình
<div class="ng-view"></div>
Ứng dụng chỉ có thể có một ng-view hướng dẫn, điều này sẽ là mẫu cho tất cả các trang mà route cung cấp.
$routeProvider
Sử dụng $routeProvider，Bạn có thể định nghĩa trang sẽ hiển thị khi người dùng nhấp vào liên kết.
Mô hình
định nghĩa $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"
});
});
của ứng dụng. cấu hình phương thức $routeProvider。Sẽ thực thi các phương thức định nghĩa trong cấu hình công việc được đăng ký trong phương thức.
controller
Sử dụng $routeProvider，Bạn có thể định nghĩa một controller cho mỗi "trang".
Mô hình
Thêm控制器：
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 = "Tôi yêu 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 vào đó, giống như trong các phần HTML khác của ứng dụng AngularJS.
Những tệp này trông như thế này:
london.htm
<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>
paris.htm
<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 ví dụ trước, chúng ta đã viết trong $routeProvider.when phương pháp đã được sử dụng templateUrl .
Bạn cũng có thể sử dụng thuộc tính template thuộc tính, nó cho phép bạn viết trực tiếp HTML trong giá trị thuộc tính, thay vì tham chiếu trang.
Mô hình
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>"
});
});
phương pháp otherwise
Trong ví dụ trước, chúng ta đã sử dụng $routeProvider phương pháp when.
Bạn cũng có thể sử dụng otherwise phương pháp, khi tất cả các tuyến đường khác không khớp, nó sẽ trở thành tuyến đường mặc định.
Mô hình
Nếu họ không nhấp vào liên kết "Banana" cũng như không nhấp vào liên kết "Tomato", hãy thông báo cho họ rằng:
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>Không có</h1><p>Chưa có gì được chọn</p>"
});
});
- Trang trước Hoạt hình AngularJS
- Trang tiếp theo Ứng dụng AngularJS
