ui-router for AngularJS

Angular cung cấp 1 cách tuyệt vời để làm 1 SPA (single page application).Khi tạo ra 1 SPA ,bộ định tuyến (Route) là cực kỳ quan trọng,bạn muốn trang của mình chỉ cẩn load những dữ liệu tại 1 view và chỉ thực hiệncontroller trong view đó mà không cần tải lại cả trang web thì đây có lẽ 1 trong những giải pháp tuyệt vời.

UI-Router là gì?

UI-router là 1 “routing framework” được xây dựng bởi đội ngũ AnguarlUI,nó cung cấp 1 cách khác biệt hơn so với ngRoute của Angular. UI-router tổ chức dữ liệu thành từng phần theo từng $state (đặc biệt xây dựng 1 multi views) theo từng truy vấn URL. UI-router cho phép bạn xử lý nhiều thao tác với route 1 cách cực kỳ dễ dàng,và đôi khi nó không quan tâm đến URL của bạn mà bạn vẫn có thể thực hiện xử lý ở các view con.

Ref: https://github.com/angular-ui/ui-router/wiki

Làm quen với UI-router

1. Cài đặt UI-Router bằng một trong các cách sau

clone & build this repository
Tải bản hoàn thiện
link tới cdn
thông qua
- jspm: bằng cách chạy lệnh $ jspm install angular-ui-router
- npm: bằng cách chạy lệnh $ npm install angular-ui-router
- Bower: by running $ bower install angular-ui-router
- Component: by running $ component install angular-ui/ui-router

2. chèn `angular-ui-router.js` (hoặc `angular-ui-router.min.js`) vào trang index.html, sau Angular

3. Thêm `ui.router` vào list thừa kế của module chính

Bạn sẽ nhận được như sau

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <script>
        var myApp = angular.module('myApp', ['ui.router']);
        // For Component users, it should look like this:
        // var myApp = angular.module('myApp', [require('angular-ui-router')]);
    </script>
    ...
</head>
<body>
    ...
</body>
</html>

Nested States & Views

Với UI-router sẽ sử dụng directive ui-view thay cho ng-view. Bạn cần phải thêm nó vào bên trong <body /> của app.

<!-- index.html -->
<body>
    <div ui-view></div>
    <!-- We'll also add some navigation: -->
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
</body>

Bạn cần phải thêm các link bằng directive ui-sref. Khi đó directive sẽ tự sinh ra href của thẻ <a />.

<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>
<!-- partials/state2.html -->
<h1>State 2</h1>
<hr/>
<a ui-sref="state2.list">Show List</a>
<div ui-view></div>

Tiếp theo bạn cần phải tạo thêm một vài template con. Nó sẽ được gọi vào ui-view của template cha.

<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>
<!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
  <li ng-repeat="thing in things">{{ thing }}</li>
</ul>

Bước cuối cùng là chúng ta cần phải cài đặt $stateProvider. Cài đặt các states:

myApp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/state1");

  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html"
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "partials/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html"
    })
    .state('state2.list', {
      url: "/list",
      templateUrl: "partials/state2.list.html",
      controller: function($scope) {
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    });
});