编程 Javascript

详解AngularJs ui-router 路由的简单介绍

Posted in Javascript onApril 26, 2017

之前有写过一篇关于Angular自带的路由：ngRoute。今天来说说Angular的第三方路由：ui-router。那么有人就会问:为什么Angular有了自带的路由，我们还需要用ui-router呢？这里简单明了的说明下ngRoute和ui-router的区别吧，其实也没很大的区别，主要的就是ngRoute针对于单视图，而ui-router可用于多视图（这里说的视图是指在页面内我们可控制的，可变化的区域）。

比如我们点击了一个link，我们需要在视图中跳转到指定的一个页面，那么ngRoute已经满足了我们的需求，而当我们点击的时候，需要在分别在不同的地方跳转两个不同的页面的时候，ngRoute就不够用了，我们就需要用到ui-router。
这里我们还是先来学习下ui-router(一些简单的服务和用法)

ui-router

$urlRouterProvider

$urlRouterProvider负责监听$location.当$location变化的时候，$urlRouterProvider开始在一个规则的列表中一个个的查找，直到找到匹配的值。$urlRouterProvider用于在后端指定url的状态配置。所有的url被编译成UrlMatcher对象。

依赖： $urlMatcherFactoryProvider $locationProvider

方法：

deferIntercept(defer);

禁用（或启用）延迟location变化的拦截。如果你想定制与URL同步的行为（例如，你需要保持当前的URL去并且推迟一个变化），那么在配置的时候使用这个方法。

参数：

defer：boolean，确定是禁止还是启用该拦截。

代码：

angular.module('Demo',['ui.router'])
 .config(["$urlRouterProvider",function(){
   $urlRouterProvider.deferIntercept(defer); // defer = true/false 
 }])

这是源码部分：

this.deferIntercept = function (defer) {
  if (defer === undefined) defer = true;
  interceptDeferred = defer; // 默认是true
 };

otherwise(rule);

定义一个当请求的路径是无效路径时跳转的路径。

rule：你想重定向的url路径或一个返回的网址路径的规则函数。函数传入两个参数：$injector和$location服务，而且必须返回一个string的url。

代码：

angular.module('Demo',['ui.router'])
 .config(["$urlRouterProvider",function(){
   $urlRouterProvider.otherwise(rule); // rule = 重定向的url规则
 }])

rule(rule);

定义使用$urlRouterProvider 来匹配指定的URL的规则。

参数：

rule：将$injector和$location作为arguments传入的处理函数。用来返回一个string类型的url路径。

代码：

angular.module('Demo',['ui.router'])
 .config(["$urlRouterProvider",function($urlRouterProvider){
   $urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.path(),
    normalized = path.toLowerCase();
    if (path !== normalized) {
      return normalized;
    }
  });
 }])

when(what,handler);

为给定的URL匹配注册一个处理程序。

参数：

what：需要重定向的传入路径。

handler：你想要重定向的路径/处理程序。

代码：

angular.module('Demo', ['ui.router']);
 .config(["$urlRouterProvider",function ($urlRouterProvider) {
  $urlRouterProvider.when($state.url, function ($match, $stateParams) {
   if ($state.$current.navigable !== state || !equalForKeys($match, $stateParams) {
    $state.transitionTo(state, $match, false);
   }
  });
 }]);

$urlRouter

依赖：$location $rootScope $injector $browser

方法：
href(urlMacther,params,options);

一个生成URL的方法，为给定的UrlMatcher返回编译后的URL，并且用提供的参数填充。

参数：

urlMacther：用于当作生成URL的模板的UrlMacther对象。
params：一个参数值的对象用来填补所需的匹配参数。
options：option对象，absolute-boolean，如果为true，将会生成一个绝对地址。

代码：

$bob = $urlRouter.href(new UrlMatcher("/about/:person"), {
  person: "bob"
 });
 // $bob == "/about/bob";
 sync();

sync();

触发更新：发生在地址栏URL变化时执行相同的更新。

$state

$state服务负责代表状态及提供状态之间的转换。它还提供你当前的状态及上一个状态。

依赖：$rootScope $q $view $injector $resolve $stateParams $urlRouter

方法：
get(stateOrName,context);返回任何指定的状态或所有状态的配置对象。

参数：

stateOrName：如果提供此参数，返回的是指定状态的配置对象；如果不提供此参数，则返回全部状态的配置对象。
context：当context是一个相对的参考状态，状态会在相关上下文中检索。

方法：

go(to,params,options);

参数：

to：string，即将跳转的状态。
params:object，跳转所带的参数。
options：object，可选配置对象。有 location(是否更新地址栏的url，或以什么字符串替换url)，inherit(是否继承当前url的参数)，relative(当变化相对路径：如"^,定义的状态是相对的)，notify(是否广播$stateChangeStart和$stateChangeSuccess事件)，reload(是否重新载入)。

代码：

$state.go('contact.detail');

href(stateOeName,params,options);

一个URL生成方法，返回为给定的状态填充指定的参数编译后的链接。

参数：

stateOeName：string，你想要生成的url的状态或者状态对象。
params：object，一个用于填充状态需要的参数的对象。
options：可选配置对象。有lossy(当第一个参数url未被提供时是否继承导航的url进行构建href),inherit(是否继承当前url的参数),relative(当变化相对路径：如"^,定义的状态是相对的),absolute(是否生成绝对url)。

代码：

$state.href("about.person", { person: "bob" })

include(stateOrName,params,options);

一个确定当前有效的状态是不是与stateOrName平级的还是其子状态。

参数：

stateOeName：string，部分名称，相对名称，或者通过当前状态进行全局模式查找。
params：object，一个参数对象。
options：可选配置对象。有relative。

代码：

<div ng-class="{highlighted:$state.includes('.item')}">Item</div>

$state.$current.name = 'contacts.details.item';
 $state.includes("contacts"); // true
 $state.includes("contacts.details"); // true
 $state.includes("contacts.details.item"); // true
 $state.includes("contacts.list"); // false
 $state.includes("about"); // false

全局模式:

$state.$current.name = 'contacts.details.item.url';
 $state.includes("*.details.*.*"); // true
 $state.includes("*.details.**"); // true
 $state.includes("**.item.**"); // true
 $state.includes("*.details.item.url"); // true
 $state.includes("*.details.*.url"); // true
 $state.includes("*.details.*"); // false 
 $state.includes("item.**"); // false

is(stateOrName,params,options);

与$state.include相似，只是这个针对的是全名。参数性质同上。

代码：

<div ng-class="{highlighted: $state.is('.item')}">Item</div>

$state.$current.name = 'contacts.details.item';
 $state.is('contact.details.item'); // true
 $state.is(contactDetailItemStateObject); // true

reload(state);

重新载入当前状态的方法。

参数：

state：一个状态名称或者状态对象。

代码：

$state.reload('contact.detail');

transitionTo(to,toParams,options);

过渡到一个新状态的方法。

参数：

to：状态名称。
toParams：将会发送到下一个状态的参数。
options：可选参数。有location，inherit，relative，notify，reload。

代码：

$state.transitionTo($state.current, $stateParams, { 
   reload: true, inherit: false, notify: true
 });

事件：
1 、$stateChangeError

路由状态变化发生错误时触发的事件。参数有：event，toState，toParams，fromState，fromParams，error。以上根据字面意思即可理解，哈哈。

2、$stateChangeStart

路由状态变化发生前触发的事件。参数有：event，toState，toParams，fromState，fromParams。

3、$stateChangeSuccess

路由状态变化正确时触发的事件。参数有：event，toState，toParams，fromState，fromParams。

4、$stateNotFound

路由状态没找到的时候触发的事件。参数有：event，unfoundState，fromState，fromParams。

$stateProvider

处理路由状态的服务，路由的状态反映了该项在应用程序中的位置，描述了在当前状态下UI是应该怎么样的，并且该做什么。

依赖：$urlRouterProvider $urlMatcherFactoryProvider

方法：

decorator(name,func);

通过内部的$stateProvider以扩展或者重写状态生成器。可用于添加ui-router的自定义功能，例如，基于状态名称推断templateUrl。

警告：因为生成器的函数执行顺序的不确定，decorator不应该相互依赖。

参数：

name：需要修改的生成函数名称。
func：负责修改生成器函数的函数。

代码：

$stateProvider.decorator('views', function (state, parent) {
  var result = {},
    views = parent(state);
  angular.forEach(views, function (config, name) {
   var autoName = (state.name + '.' + name).replace('.', '/');
   config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html';
   result[name] = config;
  });
  return result;
 });
 $stateProvider.state('home', {
  views: {
   'contact.list': { controller: 'ListController' },
   'contact.item': { controller: 'ItemController' }
  }
 });
 $state.go('home');

以上代码修饰了“views”直接通过state的名称绑定完对应的页面模板。

state(name,stateConfig);

注册一个状态，并给定其配置。

参数：

name：状态的名称。
stateConfig：状态配置对象。配置具有以下各项属性：
template： string/function，html模板字符串，或者一个返回html模板字符串的函数。
templateUrl：string/function，模板路径的字符串，或者返回模板路径字符串的函数。
templateProvider：function，返回html模板字符串或模板路径的服务。
controller：string/function，新注册一个控制器函数或者一个已注册的控制器的名称字符串。
controllerProvider：function，返回控制器或者控制器名称的服务
controllerAs：string，控制器别名。
parent：string/object，手动指定该状态的父级。
resolve：object，将会被注入controller去执行的函数，<string,function>形式。
url：string，当前状态的对应url。
views：object，视图展示的配置。<string,object>形式。
abstract：boolean，一个永远不会被激活的抽象的状态，但可以给其子级提供特性的继承。默认是true。
onEnter：function，当进入一个状态后的回调函数。
onExit：function，当退出一个状态后的回调函数。
reloadOnSearch：boolean，如果为false，那么当一个search/query参数改变时不会触发相同的状态，用于当你修改$location.search()的时候不想重新加载页面。默认为true。
data：object，任意对象数据，用于自定义配置。继承父级状态的data属性。换句话说，通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
params：url里的参数值，通过它可以实现页面间的参数传递。

ui-sref

一种将链接（<a>标签）绑定到一个状态的指令。点击该链接将触发一个可以带有可选参数的状态转换。

代码：

<a ui-sref="app.index">首页</a>
 <!-- 这里是正常的跳转 -->
 <a ui-sref="app.index({id:yourId})">你的主页</a>
 <!-- 这里是带参数对象的跳转，名称是id，值是yourId -->

简单的使用代码(ui-router的单视图)：

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
   <ol>
   <li><a ui-sref="app">app</a></li>
   <li><a ui-sref="test">test</a></li>
   </ol>
    <div ui-view></div>
   <script type="text/ng-template" id="'page1.html'">
     this is page 1 for app.
   </script>
   <script type="text/ng-template" id="'page3.html'">
     this is page 1 for test.
   </script>
 </div>

angular.module('Demo', ['ui.router'])
 .config(["$stateProvider","$urlRouterProvider",routeConfig])
 .controller("testCtrl", angular.noop)
 function routeConfig($stateProvider,$urlRouterProvider){
   $urlRouterProvider.otherwise("/app");
   $stateProvider
   .state("app",{
     url:"/app",
     templateUrl:"'page1.html'"
   })
   .state("test",{
     url:"/test",
     templateUrl:"'page3.html'"
   })
 }

使用代码(ui-router的多视图)：

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
   <ol>
   <li><a ui-sref="app.page1">app</a></li>
   <li><a ui-sref="test.page1({id:1})">test</a></li>
   </ol>
   <div ui-view></div>
   <script type="text/ng-template" id="'layout.html'">
     <div ui-view="nav@"></div>
     <div ui-view></div>
   </script>
   <script type="text/ng-template" id="'nav1.html'">
     <ol>
     <li><a ui-sref="app.page1">app.page1</a></li>
     <li><a ui-sref="app.page2">app.page2</a></li
     </ol>
   </script>
   <script type="text/ng-template" id="'nav2.html'">
     <ol>
     <li><a ui-sref="test.page1({id:1})">test.page1</a></li>
     <li><a ui-sref="test.page2">test.page2</a></li
     </ol>
   </script>
   <script type="text/ng-template" id="'page1.html'">
   this is page 1 for app.
   </script>
   <script type="text/ng-template" id="'page2.html'">
   this is page 2 for app.
   </script>
   <script type="text/ng-template" id="'page3.html'">
   this is page 1 for test.
   </script>
   <script type="text/ng-template" id="'page4.html'">
   this is page 2 for test.
   </script>
 </div>

angular.module('Demo', ['ui.router'])
 .config(["$stateProvider","$urlRouterProvider",routeConfig])
 .controller("testCtrl", angular.noop)
 function routeConfig($stateProvider,$urlRouterProvider){
   $urlRouterProvider.otherwise("/app/page1");
   $stateProvider
   .state("app",{
      url:"/app",
      views:{
        "":{
          templateUrl:"'layout.html'"
        },
        "nav":{
          templateUrl:"'nav1.html'"
        }
      }
    })
    .state("app.page1",{
      url:"/page1",
      templateUrl:"'page1.html'"
    })
    .state("app.page2",{
      url:"/page2",
      templateUrl:"'page2.html'"
    })
    .state("test",{
      url:"/test",
      views:{
      "":{
        templateUrl:"'layout.html'"
      },
       "nav":{
          templateUrl:"'nav2.html'"
        }  
    }
    })
    .state("test.page1",{
      url:"/page1?:id",
      templateUrl:"'page3.html'",
      controller:["$stateParams",function($stateParams){
        console.log($stateParams.id);// 1 这里实现传参
      }],
      params:{
        id:null
      }
    })
    .state("test.page2",{
      url:"/page2",
      templateUrl:"'page4.html'"
    })
 }

注意：需要引入angular-ui-router[.min].js

这里本兽没有也不会把全部用法写一遍 -。- 写两个简单的案例仅供学习参考。这里偷个懒，把代码都写在一个页面上完成了... 毕竟花了两个晚上的空闲时间用来整理内容和写demo 考虑到第二天要上班，都是尽量的早睡，所以整理资料拖的久了些。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解AngularJs ui-router 路由的简单介绍

- Author -

野兽''

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

静态的动态续篇之来点XML

Aug 15 Javascript

HTML颜色选择器实现代码

Nov 23 Javascript

js弹出div并显示遮罩层

Feb 12 Javascript

js控制鼠标事件移动及移出效果显示

Oct 19 Javascript

JavaScript中的console.log()函数详细介绍

Dec 29 Javascript

jquery操作复选框checkbox的方法汇总

Feb 05 Javascript

javascript去除字符串左右两端的空格

Feb 05 Javascript

JavaScript 2048 游戏实例代码(简单易懂)

Mar 25 Javascript

JS实现的二叉树算法完整实例

Apr 06 Javascript

vue.js之vue-cli脚手架的搭建详解

May 05 Javascript

详解webpack的配置文件entry与output

Aug 21 Javascript

JS如何设置元素样式的方法示例

Aug 28 Javascript

JS ES6多行字符串与连接字符串的表示方法

Apr 26 #Javascript

node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

Apr 26 #Javascript

Vue.js实现文章评论和回复评论功能

May 30 #Javascript

详解node.js平台下Express的session与cookie模块包的配置

Apr 26 #Javascript

jQuery实现鼠标滑过预览图片大图效果的方法

Apr 26 #jQuery

快速使用node.js进行web开发详解

Apr 26 #Javascript

js canvas实现擦除效果示例代码

Apr 26 #Javascript