AngularJS Routing sử dụng UI-Router
Bài đăng này đã không được cập nhật trong 6 năm
Tổng quan
AngularUI Router là gì?
UI-Router là một routing framework cho AngularJS được built bởi AngularUI team. Nó cung cấp một cách tiếp cận khác với với ngRoute vì nó thay đổi view ứng dụng của bạn dựa trên trạng thái của ứng dụng chứ không chỉ là route URL.
States và URL Route
Với cách tiếp cận này, view và routes của bạn không bị ràng buộc vào URL của trang web. Bằng cách này, bạn có thể thay đổi các phần của trang web bằng cách định tuyến của mình ngày cả khi URL không thay đổi.
Khi sử dụng ngRoute, bạn phải sử dụng ngInclude hoặc các phương pháp khác và điều này có thể gây nhầm lẫn. Bây giờ tất cả states, routing và views của bạn được xử lý trong một .config() của bạn, điều này sẽ giúp ích khi sử dụng chế độ xem từ trên xuống của ứng dụng.
Setup
Hãy bắt đầu ứng dụng đơn giản tạo trang Home và About, chúng ta sẽ cần một vài tập tin:
- index.html // will hold the main template for our app
- app.js // our angular code
- partial-about.html // about page code
- partial-home.html // home page code
- partial-home-list.html // injected into the home page
- table-data.html // re-usable table that we can place anywhere
Hãy bắt đầu với file index.html.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
Lưu ý rằng chúng ta cũng tải lên ui-router, UI Router là tách biệt với Angular core, giống như ngRoute là riêng biệt.
Khi tạo một liên kết với UI-Router, bạn sẽ sử dụng ui-sref. Các href sẽ được tạo ra từ điều này và bạn muốn điều này để trỏ đến một state nhất định của ứng dụng của bạn. Chúng được tạo ra trong app.js.
Chúng ta vẫn sử dụng <div ui-view></div> thay vì div ng-view></div> của ngRoute.
Hãy bắt đầu ứng dụng của chúng ta bây giờ trong app.js.
// app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
Bây giờ chúng ta đã tạo ra outerApp mà chúng ta đã áp dụng cho body trong tệp index.html.
Ở đây chúng ta có một .state() cho home và cho about. Trong home, chúng ta đang sử dụng template file partial-home.html.
Hãy điền vào trang partial-home.html một số thông tin.
<!-- partial-home.html -->
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</div>
Và đây là kết quả đầu tiên.
Nested Views Home Page
Chúng ta sẽ thêm 2 nút vào trang chủ và từ đó sẽ hiển thị thông tin khác nhau dựa trên những gì được click.
<!-- partial-home.html -->
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>
Khi liên kết đến một nested view, chúng ta sẽ sử dụng dấu chấm: ui-sref=".list" và ui-sref=".paragraph". Chúng sẽ được định nghĩa trong tệp Angular file và khi thiết lập nó ở đó, chúng ta sẽ đưa vào <div ui-view></div>..
Trong tệp app.js, hãy tạo các nested states.
// app.js
...
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
...
Bây giờ ui-sref chúng ta định nghĩa trong home.html được liên kết với một trạng thái thực tế. Với home.list và home.paragraph được tạo, các liên kết này sẽ lấy template được cung cấp và chèn nó trong ui-view.
Điều cuối cùng chúng ta cần làm cho trang chủ là định nghĩa tệp partial-home-list.html.
<!-- partial-home-list.html -->
<ul>
<li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
Bây giờ khi click vào List, nó sẽ đưa ra danh sách dog đã được khai báo trong controller. Hoặc nếu click Paragraph, nó sẽ đưa ra một đoạn văn.
Bây giờ bạn có thể dễ dàng chuyển đổi các thành phần của app dựa trên code hiện tại. Chúng ta không cần phải sử dụng ngInclude, ngShow, ngHide, or ngIf. Nó sẽ giúp cho những file view được hoạt động trơn tru hơn.
Tổng kết
Tới đây thì chúng ta đã hoàn thành một app mô tả tổng quan về UI-Router. Khi bạn nhìn vào ứng dụng của bạn như là các trạng thái thay vì phải đi vào các tùy chọn ngRoute. Các ứng dụng Angular có thể dễ dàng đưowjc tạo ra để được modular và extensible. Tài liệu tham khảo tại đây.
All rights reserved
