angular-ui-router API

UI Router 中有三种方式激活一个路由： 
（1）$state.Go()：优先级较高的便利方式 
（2）ui-sref：点击包含此指令跳转 
（3）url：url导航

一、$state.go()

（1）$state.go(to [, toParams] [, options]) 
参数： 
to：绝对“state名称”或者相对的“state路径”（如果路径，以“^或者.”是相对，否则为绝对） 
toParams：发送给state的数据参数，由$stateParams构建 
options：{ location: true, inherit: true, relative: $state.$current, notify: true } 
（2）$state.transitionTo(to, toParams [, options]) 
$state.go() 内部调用此方法 
（3）$state.reload() 
（4）$state.includes(stateName [, params]) stateName是否为当前路由的一部分 
（5）$state.is(stateOrName [, params]) stateOrName是否为当前路由（完全匹配） 
注意：contact.details.item === contactDetailsItem 
（6）$state.href(stateOrName [, params] [, options]) 
（7）$state.get([stateName]) 
（8）$state.current

参考地址：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto–toparams–options

二、ui-sref

此指令必须绑定到<a>标签，如果该路由有对应的关联URL，其通过$state.href()自动生成和更新href属性。

<a ui-sref="home">Home</a> | <a ui-sref="about">About</a>11

（1）ui-sref-active=”active” 该路由激活，则对应增加active样式名称

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li></ul>1234512345

当路由是“pp.user”，且包含参数user值为’bilbobaggins’，会变成如下

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li></ul>1234512345

（2）ui-sref-opts 传递参数

<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>11

参考地址：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

三、URL Routing

$stateProvider
    .state('contacts', {
        url: "/contacts",
        templateUrl: 'contacts.html'
    })1234512345

其支持正则、查询参数

（1）$urlRouterProvider.when() 
（2）$urlRouterProvider.otherwse() 
（3）$urlRouterProvider.rule()

var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/', '/index');    $urlRouterProvider.otherwise('/index');
});1234512345

参考地址：https://github.com/angular-ui/ui-router/wiki/URL-Routing

四、示例（多视图：页面可以显示多个动态变化的不同区块）

// Node静态服务var http = require("http");var express = require("express");var serveStatic = require('serve-static');var app = new express();

app.use(serveStatic(__dirname + '/'));
app.get("/", function(req, res) {
    res.sendFile(__dirname + "/Main2.html");
})
app.listen(1337, "localhost");123456789101112123456789101112
<!-- Main2.html --><!DOCTYPE html><head>
    <title></title>
    <script src="./angular.js"></script>
    <script src="./angular-ui-router.js"></script>
    <script src="./App2.js"></script></head><body data-ng-app="myApp">
    <h1>多ui-view</h1>
    <div ui-view></div>
    <div ui-view="chart"></div> 
    <div ui-view="data"></div> </body><html>1234567891011121314151612345678910111213141516
// App2.jsvar myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/home");    $stateProvider.state("home", {
            url: "/home",
            views: {                "": {
                    template: "<h1>HELLO!</h1>"
                },                "chart": {
                    template: "chart"
                },                "data": {
                    template: "data"
                }
            }
        })
        .state("index", {
            url: "/index",
            views: {                "": {
                    template: "<h1>HELLO!</h1>"
                },                "data": {
                    template: "data-index"
                }
            }
        })   
});123456789101112131415161718192021222324252627282930123456789101112131415161718192021222324252627282930

五、示例（嵌套视图：页面某个动态变化区块中，嵌套着另一个可以动态变化的区块）

// Node静态服务var http = require("http");var express = require("express");var serveStatic = require('serve-static');var app = new express();

app.use(serveStatic(__dirname + '/'));
app.get("/", function(req, res) {
    res.sendFile(__dirname + "/Main.html");
})
app.listen(1337, "localhost");123456789101112123456789101112
<!-- Main.html --><!DOCTYPE html><head>
    <title></title>
    <script src="./angular.js"></script>
    <script src="./angular-ui-router.js"></script>
    <script src="./App.js"></script></head><body data-ng-app="myApp">
    <h1>AngularJS Home Page (Ui-router Demonstration)</h1>
    <div ui-view></div></body><html>12345678910111213141234567891011121314
// App.jsvar myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.when("", "/PageTab");     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});1234567891011121314151617181920212212345678910111213141516171819202122
<!-- PageTab.html --><div>
     <div>
         <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
         <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
         <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
     </div>
     <div>
          <div ui-view/>
     </div></div><!-- Page1.html --><div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div></div><!-- Page2.html --><div>
     <div>
         <h1>Page 2 content goes here...</h1>
     </div></div><!-- Page3.html --><div>
     <div>
         <h1>Page 3 content goes here...</h1>
     </div></div>123456789101112131415161718192021222324252627282930313233123456789101112131415161718192021222324252627282930313233