【ionic+angularjs】angularjs ui-router路由简介($urlRouter、
原文出处:http://www.cnblogs.com/ys-ys/p/5052660.html?utm_source=tuicool&utm_medium=referral 之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域)。比如: 我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute已经满足了我们的需求,而当我们点击的时候,需要在分别在不同的地方跳转两个不同的页面的时候,ngRoute就不够用了,我们就需要用到ui-router。 ui-router $urlRouterProvider 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); function(){
$urlRouterProvider.otherwise(rule); rule = 重定向的url规则
}])
rule(rule); angular.module('Demo',255); line-height:1.5!important">function($urlRouterProvider){ $urlRouterProvider.rule(function ($injector,$location) { var path = $location.path(),normalized = path.toLowerCase(); if (path !== normalized) { return normalized; } }); }]) when(what,handler); ]);
.config(["$urlRouterProvider",255); line-height:1.5!important">function ($urlRouterProvider) {
$urlRouterProvider.when($state.url,function ($match,$stateParams) {
if ($state.$current.navigable !== state || !equalForKeys($match,$stateParams) {
$state.transitionTo(state,$match,255); line-height:1.5!important">false);
}
});
}]);
$urlRouter $bob = $urlRouter.href(new UrlMatcher("/about/:person"),{ person: "bob" }); $bob == "/about/bob"; sync(); sync(); $state 方法: go(to,options); $state.go('contact.detail'); href(stateOeName,options); $state.href("about.person",{ person: "bob" }) include(stateOrName,options); <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,options); ="{highlighted: $state.is('.item')}"
$state.$current.name = 'contacts.details.item'; $state.is('contact.details.item'); true $state.is(contactDetailItemStateObject); true reload(state); $state.reload('contact.detail'); transitionTo(to,toParams,options); $state.transitionTo($state.current,$stateParams,{ reload: true,inherit: false,notify: true }); 事件: $stateProvider 依赖:$urlRouterProvider $urlMatcherFactoryProvider $stateProvider.decorator('views',255); line-height:1.5!important">function (state,parent) { var result = {},views = parent(state); angular.forEach(views,255); line-height:1.5!important">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的名称绑定完对应的页面模板。 a ui-sref="app.index">首页a>
<!-- 这里是正常的跳转 -->
="app.index({id:yourId})">你的主页 这里是带参数对象的跳转,名称是id,值是yourId -->
简单的使用代码(ui-router的单视图): ng-app="Demo" ng-controller="testCtrl as ctrl"> olli><="app">app></="test">test> ui-viewscript type="text/ng-template" id="'page1.html'"> this is page 1 for app. script="'page3.html'" test. > ])
.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的多视图): ="app.page1"="test.page1({id:1})"="'layout.html'"<div ui-view="nav@></div>
div>
="'nav1.html'"ol>
lia uisrefapp.page1>a><app.page2li
ol>
="'nav2.html'"test.page1({id:1})test.page1test.page2>
="'page2.html'"2 ="'page4.html'");
$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",255); line-height:1.5!important">function($stateParams){
console.log($stateParams.id); 1 这里实现传参
}],params:{
id:null
}
})
.state("test.page2",templateUrl:"'page4.html'"
})
}
注意:需要引入angular-ui-router[.min].js (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- unix – grep,awk或sed?在一个文件中打印匹配另一个文件中
- vim – 为什么我的’jk’zsh vi-cmd-mode绑定不起作用
- 【数据结构】非线性结构---树(基本概念)
- scala – 如何将函数应用于Spark DataFrame的列?
- 如何在AngularJS中检测onKeyUp?
- Twitter Bootstrap 中文帮助文档/中文手册/中文教程
- 解决“/bin/bash^M: bad interpreter: No such file or dir
- Bootstrap表单(二)
- 18个经典的Angularjs项目
- Bootstrap弹出框(modal)垂直居中的问题及解决方案详解