UI-Router


SPA





SPA

(Single Page Application)


优势

（Advantages）

  • 减少向服务器请求网页的次数
  • 数据和表现分离（模块开发）
  • 充分利用客户端的能力（缓存页面等）
  • 易于测试

缺点

（Disadvantages）

  • 资源缓存过多可能导致内存泄漏
  • 浏览器必须支持JavaScript
  • 业务逻辑暴露在前端
  • SEO较困难

基本概念

  • ui-sref
  • ui-view
  • The Dot
  • $stateProvider
  • $urlRouterProvider
  • $stateParams
  • $state
  • @
  • Abstract States(抽象路由)
  • Events(路由事件)

Live Demo

ui-sref

相当于<a>标签的href
<li ng-repeat="contact in contacts">
   <a ui-sref="contacts.detail({ id: contact.id })"</a>
</li>
使用相对路径
 <a ui-sref='^'>Home</a>

ui-view

未命名
 <div ui-view></div>

The Dot® 


$stateProvider    .state("home", { ... });    .state("contacts", { ... });
    .state("contacts.detail", { ... });
    .state("contacts.detail.edit", { ... });


在state中的'.'标明其父子关系。

所以 'contacts.detail'的父页面是 'contacts'.

Demo

命名
 <div ui-view="named"></div>
Demo

嵌套结构







$stateProvider

  $stateProvider.state('simple', {
    url: '/simple/:param',
    // or '/simple?param',
    // or '/simple/{param}',
    template: viewTemplate,
    // templateUrl: 'xxx.html',
    controller: 'viewCtrl' ,    // or 'viewCtrl as view'     // or function($scope,service)    resolve: {} // 作前期数据准备，完成后才会实例化controller,    data: {} // 提供自定义数据    params: {} // 设置默认参数    views: {      'viewname@statename' // 绝对视图概念      } // 精确路由和同一状态多个view同时更新    abstract: boolean (default:false) // 抽象路由  });

$urlRouterProvider

  • otherwise
  • when

 $urlRouterProvider.otherwise('/index'); // 路由无法匹配默认跳转地址  
 $urlRouterProvider.when('A-URL','B-URL'); // 如果URL匹配A重定向到B



$stateParams

Basic
url: '/contacts/:contactId'url: '/contacts/{contactId}'
Regex
url: '/contacts/{contactId:[0-9a-fA-F]{1,8}}' //Hexadecimals
Query
url: '/contacts?contactId&contactRegion' //Separate with '&'


//State URL:url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to'//Navigate to:'/users/123/details//0' //$stateParams will be{ id:'123', type:'', repeat:'0' } //Navigated to:'/users/123/details/default/0?from=there&to=here' //$stateParams will be{ id:'123', type:'default', repeat:'0',from:'there', to:'here' }

继承性



  • Scope中的属性和方法（Angular特性非UI-Router）
  • 'resolve' 依赖
  • 'data' 自定义数据

'resolve' 依赖


   .state('parent', {
      resolve:{
         resA:  function(){
            return {'value': 'A'};
         }
      },
      controller: function($scope, resA){
          $scope.resA = resA.value;
      }
   })
   .state('parent.child', {
      resolve:{
         resB: function(resA){
            return {'value': resA.value + 'B'};
         }
      },
      controller: function($scope, resA, resB){
          $scope.resA2 = resA.value;
          $scope.resB = resB.value;
      }
Learn more about how resolves work.

继承自定义'data'

$stateProvider   .state('parent', {
      data:{
         customData1:  "Hello",
         customData2:  "World!"
      }
   })
   .state('parent.child', {
      data:{
         // customData1 inherited from 'parent' 
         // but we'll overwrite customData2
         customData2:  "UI-Router!"
      }
   });

$rootScope.$on('$stateChangeStart', function(event, toState){ 
    var greeting = toState.data.customData1 + " " + toState.data.customData2;
    console.log(greeting);
})

当 'parent' 被激活，输出 'Hello World!' 

当 'parent.child' 被激活，输出 'Hello UI-Router!' 

如何激活路由



1. $state.go()

2. 点击一个带有 ui-sref 的指令

3. 通过路由配置的url

$state.go()




myApp.controller('contactCtrl', ['$scope', '$state', 
  function($scope, $state){
     $scope.goToDetails = function(){
        $state.go('contact.details', {id: selectedId});
     }
  }
Params...
1. state name
2. state params (可选)
3. options (可选)

路由Trees

“因为UI-Router为我们保存了一张路由树，
我们可以方便的在这树上玩耍。”

记住下面的符号！

^   向上
.   向下


Examples

Start          Middle          End   

Go to parent - $state.go('^')


Go to child - $state.go('.3')


Go to sibling - $state.go('^.1')


Absolute Path - $state.go('3.3')


LOL! - $state.go('^.^.2.1')

@

  • 相对视图
  • 绝对视图

Go

抽象路由

Abstract States


  • 抽象状态无法直接激活
  • 抽象状态内须嵌套子路由
  • 子路由激活抽象状态

Demo

事件

（Events）


State Change Events

$stateChangeStart (event, toState, toParams, fromState, fromParams)
can e.preventDefault()
$stateNotFound (event, unfoundState, fromState, fromParams) 

$stateChangeSuccess (event, toState, toParams, fromState, fromParams)
$stateChangeError (event, toState, toParams, fromState, fromParams, error)

View Load Events

$viewContentLoading (event, viewConfig)
$viewContentLoaded (event)

Thanks!!



Resources

Github Repo
In Depth Guide
API Reference
Demo App (Source)
FAQ

by Jeffrey Yu 

Inspiration from Tim Kindberg
Made with Slides.com