zoukankan      html  css  js  c++  java
  • AngularUI Router 概要【转】

    通过AngularJS来创建SPA(single page application),要想让页面导航看起来跟一般Web页面一样的话,路由相当重要。AngularUI Router是AngularUI 团队开发的一个AngularJS路由模块,相比AngularJS的标准路由ngRoute,它更灵活,基于state而不是URL在一个页面中加载多个View并保持View的层次,Nested States & Views以及Multiple & Named Views。UI-Router被认为是AngularUI为开发者提供的最实用的一个模块。 

    和ngRoute相比: 

    • $route -> $state
    • $routeParams -> $stateParams
    • $routeProvider -> $stateProvider
    • <div ng-view></div> -> <div ui-view></div>


    (1)设置路由 
    在.config()方式中使用$stateProvider(不是$routeProvider): 

    Js代码  收藏代码
    1. $stateProvider.state('state名', {设置信息});  



    但是默认otherwise需要使用$urlRouterProvider来设置 

    Js代码  收藏代码
    1. $urlRouterProvider.otherwise('/tab/home');  



    例如: 

    Js代码  收藏代码
    1. $stateProvider  
    2.     .state("emp",{  
    3.         url:"/emp"  
    4.         ,templateUrl:"list.html"  
    5.         ,controller:"ListCtrl"  
    6.     })  
    7.     .state("emp.detail",{  
    8.         url:"/:empID"  
    9.         ,templateUrl:"emp.html"  
    10.         ,controller:"EmpCtrl"  
    11.     });  



    ngRoute的设置方法: 

    Js代码  收藏代码
    1. $routeProvider.when('url', {设置信息});  



    例如: 

    Js代码  收藏代码
    1. $routeProvider  
    2.     .when("/emp",{  
    3.         templateUrl:"list.html"  
    4.         ,controller:"ListCtrl"  
    5.     })  
    6.     .when("/emp/:empID"){  
    7.         templateUrl:"emp.html"  
    8.         ,controller:"EmpCtrl"  
    9.     };  



    (2)层次化 
    state可以嵌套,通过state名中的点来划分层次。 
    格式为:父View.子View 
    比如:items.detail是items的子View。 

    Js代码  收藏代码
    1. $stateProvider  
    2.   .state("items", {  
    3.     abstract: true,  
    4.     url: "/items"  
    5.     templateUrl: "items.html" // 必须包含<ui-view/>  
    6.   })  
    7.   .state("items.detail", {  
    8.     url: "/detail", // URL就是"/items/detail"  
    9.     templateUrl: "items-detail.html"  
    10.   })  
    11.   .state("items.info", {  
    12.     url: "/info", // URL就是"/items/info"  
    13.     templateUrl: "items-info.html"  
    14.   });  



    (3)指定View名 
    <div ui-view="view1"></div> 
    <div ui-view="view2"></div> 

    Js代码  收藏代码
    1. .state("emp.detail"),{  
    2.     url:"/:empID"  
    3.     ,views:{  
    4.         view1:{  
    5.             templateUrl:"view1.html"  
    6.             ,controller:"View1Ctrl"  
    7.         }  
    8.         ,view2:{  
    9.             templateUrl:"view1.html"  
    10.             ,controller:"View1Ctrl"  
    11.         }  
    12.     }  
    13. }  



    初始View 

    Js代码  收藏代码
    1. .state("emp.detail"),{  
    2.     url:"/:empID"  
    3.     ,views:{  
    4.         "":{  
    5.             templateUrl:"emp.html"  
    6.             ,controller:"EmpCtrl"  
    7.         }  
    8.     }  
    9. }  



    view@state 

    Js代码  收藏代码
    1. .state("emp.detail.picture"),{  
    2.     url:"/all"  
    3.     ,views:{  
    4.         "@emp":{  
    5.             templateUrl:"picture.html"  
    6.             ,controller:"PictureCtrl"  
    7.         }  
    8.     }  
    9. }  



    (4)设置 
    url:默认相对路径(以^开头的是绝对路径) 
    views:每个子视图可以包含自己的模板、控制器和预载入数据。 
    abstract:抽象模板不能被激活 
    template、templateUrl、templateProvider:HTML字符串或者返回HTML字符串的函数、HTML模板的路径或者返回HTML模板路径的函数、返回HTML字符串的函数 
    controller、controllerProvider:指定任何已经被注册的控制器或者一个作为控制器的函数 
    resolve:在路由到达前预载入一系列依赖或者数据,然后注入到控制器中。 
    data:数据不会被注入到控制器中,用途是从父状态传递数据到子状态。 
    onEnter/onExit:进入或者离开当前状态的视图时会调用这两个函数 

    URL使用举例: 
    url: '/inbox' 
    url: '/inbox/:inboxId' 
    url: '/inbox/{inboxId}' 
    url: '/inbox/{inboxId:[0-9a-fA-F]{6}}' 
    url: '/inbox/{inboxId:.*}' 
    url: '/inbox?sort' 
    url: '/inbox/:inboxId/messages/{sorted}?from&to' 
    url: '/party/:partyID/:partyLocation' 
    url: '/product/info/favorite?pid&jancode&showAddFavorite&fromPg' 

    (5)页面跳转 
    <a href="#/emp/hoge/1234">Go</a> 
    <a ui-sref=".hoge({id:empID})">Go</a> 
    $state.go('state名', {参数}); 

    (6)事件 
    state事件 

    • $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... })
    • $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ ... })
    • $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })
    • $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ ... })


    view事件 
    View被加载但是DOM树构建之前时: 
    $scope.$on('$viewContentLoading', function(event, viewConfig){ ... }); 
    View被加载而且DOM树构建完成时: 
    $scope.$on('$viewContentLoaded', function(event){ ... }); 

    参考: 
    https://github.com/angular-ui/ui-router 
    https://docs.angularjs.org/api/ngRoute 
    http://angular-ui.github.io/ui-router/sample/ 
    http://scotch.io/tutorials/javascript/angular-routing-using-ui-router 
    http://blog.eisneim.com/articles/dive_deep_into_ui-router.html

  • 相关阅读:
    dotnet 新项目格式与对应框架预定义的宏
    dotnet 线程静态字段
    dotnet 线程静态字段
    dotnet 通过 WMI 拿到显卡信息
    dotnet 通过 WMI 拿到显卡信息
    dotnet 通过 WMI 获取指定进程的输入命令行
    dotnet 通过 WMI 获取指定进程的输入命令行
    dotnet 通过 WMI 获取系统信息
    dotnet 通过 WMI 获取系统信息
    PHP show_source() 函数
  • 原文地址:https://www.cnblogs.com/yangzhx/p/4315451.html
Copyright © 2011-2022 走看看