[Angular] bài 4: routes
Bài đăng này đã không được cập nhật trong 3 năm
Xin chào các bạn, bài trước mình đã đưa ra một vài cách thức để IN, OUT dữ liệu cơ bản.
Hôm nay, mình sẽ đưa ra hai thư viện về cách điều huowgns trong Angular
Hiện tại, về điều hướng trong angular thì 2 từ khóa nổi nhất:
- angular-route
- angular-ui-route
Dưới đây là cách sử dụng của chúng:
I) angular-route
chúng ta add thêm thư viện angular-route.js vào head của file index.html
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
giờ chúng ta sẽ tạo folder app/components và trong đó tạo ra 4 file main.html
<h1>Main routes</h1>
blue.html
<h1 style="color: blue">this blue</h1>
red.html
<h1 style="color: red">this blue</h1>
Sửa file index.html thành
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="configs/app.config.js"></script>
</head>
<body ng-app="ProjectDemo">
<p><a href="#/">Main</a></p>
<a href="#red">Red</a>
<a href="#blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("ProjectDemo", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "components/main.html"
})
.when("/red", {
templateUrl : "components/red.html"
})
.when("/blue", {
templateUrl : "components/blue.html"
});
});
</script>
</body>
</html>
và chúng ta có kết quả
II) Angular-ui-routes
chúng ta add thêm thư viện angular-ui-route.js vào head của file index.html
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
Chúng ta giữ lại components như Demo trên
và thay đổi file index.html thành
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="configs/app.config.js"></script>
</head>
<body ng-app="ProjectDemo">
<a href="#">Main</a>
<a ui-sref="blue">Blue</a>
<a ui-sref="red">Red</a>
<div ui-view></div>
<script>
var myapp = angular.module('ProjectDemo', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/")
$stateProvider
.state('main', {
url: "/",
templateUrl: "components/main.html"
})
.state('blue', {
url: "/blue",
templateUrl: "components/blue.html"
})
.state('red', {
url: "/red",
templateUrl: "components/red.html"
})
})
</script>
</body>
</html>
và chúng ta có kết quả:
giờ từ file main.html và green.html, chúng ta cùng load ra danh sách thì sẽ làm thế nào?
Đối với trường hợp cơ bản là điều hướng trang chính thì phương thức của angular-route và angular-ui-routes tương tự nhau.
Giờ chúng ta sẽ xem qua một ví dụ khác của angular-ui-router dưới đây:
chúng ta sẽ thêm 4 file với nội dung như dưới đây vào app/:
File route1.html
<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
File route1.list.html
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
File route2.html
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
File route2.list.html
<h3>List of Route 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
và cập thay đổi file index.html thành:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i></p>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="route1">Route 1</a></li>
<li><a ui-sref="route2">Route 2</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope){
$scope.things = ["A", "Set", "Of", "Things"];
}
})
})
</script>
</body>
</html>
Như chúng ta thấy, trong cả 2 page route1 và route2 cùng tồn tại folder list, chúng ta có thể dùng để hỗ trợ load và quản lý components một cách đơn giản hơn
III)Kết luận
Trên đây là hai thư viện route cơ bản được dùng angular Do thời gian tìm hiểu còn ít và sơ sài, mong được các bạn góp ý nhiều hơn
Xin cảm ơn
All rights reserved
