AngularJs 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。 代码： $urlRouterProvider.otherwise(rule); // rule = 重定向的url
}])
rule(rule); 定义使用$urlRouterProvider 来匹配指定的URL的规则。 参数： rule：将$injector和$location作为arguments传入的处理函数。用来返回一个string类型的url路径。 代码： angular.module($urlRouterProvider){ $urlRouterProvider.rule(function ($injector,$location) { var path = $location.path(),normalized = path.toLowerCase(); if (path !== normalized) { return normalized; } }); }]) when(what,handler); 为给定的URL匹配注册一个处理程序。 参数： what：需要重定向的传入路径。 handler：你想要重定向的路径。 代码： 'ui.router']); .config([function ($urlRouterProvider) { $urlRouterProvider.when($state.url,128)">$match,128)">$stateParams) { if ($state.$current.navigable !== state || !equalForKeys($stateParams) { $state.transitionTo(state,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,ortions); 参数： to：string，即将跳转的状态。 params:object，跳转所带的参数。 options：object，可选配置对象。有 location(是否更新地址栏的url，或以什么字符串替换url)，inherit(是否继承当前url的参数)，relative(当变化相对路径：如"^,定义的状态是相对的)，notify(是否广播$stateChangeStart和$stateChangeSuccess事件)，reload(是否重新载入)。 代码： $state.go('contact.detail');
href(stateOeName,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,options); 一个确定当前有效的状态是不是与stateOrName平级的还是其子状态。 参数： stateOeName：string，部分名称，相对名称，或者通过当前状态进行全局模式查找。 params：object，一个参数对象。 options：可选配置对象。有relative。 代码： <div ng-class="{highlighted:$state.includes('.item')}">Item</div> $current.name = 'contacts.details.item'; $state.includes("contacts"); // true "contacts.details"); "contacts.details.item"); "contacts.list"); // false "about"); // false 全局模式: 'contacts.details.item.url'; "*.details.*.*"); "*.details.**"); "**.item.**"); "*.details.item.url"); "*.details.*.url"); "*.details.*"); // false "item.**"); // false is(stateOrName,options); 与$state.include相似，只是这个针对的是全名。参数性质同上。 代码： "{highlighted: $state.is('.item')}">Item$state.is('contact.details.item'); $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,128)">$stateParams,{ reload: true,inherit: false,notify: true }); 事件： $stateChangeError 路由状态变化发生错误时触发的事件。参数有：event，toState，toParams，fromState，fromParams，error。以上根据字面意思即可理解，哈哈。 $stateChangeStart 路由状态变化发生前触发的事件。参数有：event，toState，toParams，fromState，fromParams。 $stateChangeSuccess 路由状态变化正确时触发的事件。参数有：event，toState，toParams，fromState，fromParams。 $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' },68)">'contact.item': { controller: 'ItemController' } } }); '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的单视图)： ng-app="Demo" ng-controller="testCtrl as ctrl"> <ol> <li>"app">app</a></li> "test">test</ol> ui-view></div> <script type="text/ng-template" id="'page1.html'"> this is page 1 for app. </script> "'page3.html'"> this is page 1 for test. </script> "$stateProvider",routeConfig]) .controller("testCtrl",angular.noop) function routeConfig($stateProvider,128)">$urlRouterProvider){ $urlRouterProvider.otherwise("/app"); $stateProvider .state("app",{ url:"/app",views:{ "":{ templateUrl:"'page1.html'" } } }) .state("test",68)">"/test",68)">"'page3.html'" } } }) } 使用代码(ui-router的多视图)： "app.page1">app"test.page1({id:1})">test</div> "'layout.html'"> <div ui-view="nav@"></div> </div> </script> "'nav1.html'"> <ol> "app.page1">app.page1</li> "app.page2">app.page2</li </ol> "'nav2.html'"> <ol> "test.page1({id:1})">test.page1"test.page2">test.page2"'page1.html'"> this is page 1 for app. "'page2.html'"> this is page 2 for app. "'page3.html'"> this is page 1 for test. "'page4.html'"> this is page 2 for test. </script> "$stateProvider",128)">$urlRouterProvider",angular.noop) function routeConfig($urlRouterProvider){ "/app/page1"); $stateProvider .state("":{ templateUrl:"'layout.html'" },68)">"nav":{ templateUrl:"'nav1.html'" } } }) .state("app.page1",68)">"/page1",templateUrl:"'page1.html'" }) .state("app.page2",68)">"/page2",68)">"'page2.html'" }) .state("":{ templateUrl:"'layout.html'" },68)">"'nav2.html'" } } }) .state("test.page1",68)">"/page1?:id",68)">"'page3.html'",controller:[$stateParams",128)">$stateParams){ console.log($stateParams.id);// 1 这里实现传参 }],params:{ id:null } }) .state("test.page2",68)">"'page4.html'" }) } 注意：需要引入angular-ui-router[.min].js （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |