首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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，并且用提供的参数填充。

参数：

  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  考虑到第二天要上班，都是尽量的早睡，所以整理资料拖的久了些。

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

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

- Author -

野兽''

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

Javascript 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
js停止输出代码
Jul 20 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
python-pcl(1) 历史记录(1) 遍历文件夹(1) dll(1) html标准库(1) 有序排列(1) Anaconda(2) 公共键(1) key(1) pycryto(1)
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python对字典进行排序实例
2014/09/25 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
python实现清屏的方法
2015/04/30 Python
Python字符串替换实例分析
2015/05/11 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
使用Python更换外网IP的方法
2018/07/09 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
西铁城美国官方网站：Citizen Watch美国
2019/11/08 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
监理资料员岗位职责
2014/01/03 职场文书