详解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,并且用提供的参数填充。

参数:

  1. urlMacther:用于当作生成URL的模板的UrlMacther对象。
  2. params:一个参数值的对象用来填补所需的匹配参数。
  3. 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);返回任何指定的状态或所有状态的配置对象。

参数:

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

方法:

go(to,params,options);

参数:

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

代码:

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

href(stateOeName,params,options);

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

参数:

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

代码:

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

include(stateOrName,params,options);

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

参数:

  1. stateOeName:string,部分名称,相对名称,或者通过当前状态进行全局模式查找。
  2. params:object,一个参数对象。
  3. 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);

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

参数:

  1. to:状态名称。
  2. toParams:将会发送到下一个状态的参数。
  3. 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不应该相互依赖。

参数:

  1. name:需要修改的生成函数名称。
  2. 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);

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

参数:

  1. name:状态的名称。
  2. stateConfig:状态配置对象。配置具有以下各项属性:
  3. template: string/function,html模板字符串,或者一个返回html模板字符串的函数。
  4. templateUrl:string/function,模板路径的字符串,或者返回模板路径字符串的函数。
  5. templateProvider:function,返回html模板字符串或模板路径的服务。
  6. controller:string/function,新注册一个控制器函数或者一个已注册的控制器的名称字符串。
  7. controllerProvider:function,返回控制器或者控制器名称的服务
  8. controllerAs:string,控制器别名。
  9. parent:string/object,手动指定该状态的父级。
  10. resolve:object,将会被注入controller去执行的函数,<string,function>形式。
  11. url:string,当前状态的对应url。
  12. views:object,视图展示的配置。<string,object>形式。
  13. abstract:boolean,一个永远不会被激活的抽象的状态,但可以给其子级提供特性的继承。默认是true。
  14. onEnter:function,当进入一个状态后的回调函数。
  15. onExit:function,当退出一个状态后的回调函数。
  16. reloadOnSearch:boolean,如果为false,那么当一个search/query参数改变时不会触发相同的状态,用于当你修改$location.search()的时候不想重新加载页面。默认为true。
  17. data:object,任意对象数据,用于自定义配置。继承父级状态的data属性。换句话说,通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
  18. 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  考虑到第二天要上班,都是尽量的早睡,所以整理资料拖的久了些。

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

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
vue实现全选和反选功能
Aug 31 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 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
You might like
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
体育活动总结范文
2014/05/04 职场文书
竞聘上岗演讲
2014/05/19 职场文书
运动会加油口号
2014/06/07 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
孔繁森观后感
2015/06/10 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技