【ionic+angularjs】angularjs ui-router路由简介（$urlRouter、$state、$stateProvider、ui-sref....）
12
对于【ionic+angularjs】angularjsui-router路由简介感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解$urlRouter、$state、$stateProvid
对于【ionic+angularjs】angularjs ui-router路由简介 感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解$urlRouter、$state、$stateProvider、ui-sref.... ，并且为您提供关于Angular UI-Router $ urlRouterProvider。不工作时*不再*、Angular UI-Router $ urlRouterProvider。单击时不起作用、Angular UI-Router $ urlRouterProvider不工作时*不再*、Angular UI-Router $ urlRouterProvider单击时不起作用 的宝贵知识。
本文目录一览：
【ionic+angularjs】angularjs ui-router路由简介（$urlRouter、$state、$stateProvider、ui-sref....） 原文出处：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 依赖 ： $urlMatcherFactoryProvider $locationProvider方法 ：deferIntercept(defer); 参数 ：
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 依赖 ：$location $rootScope $injector $browser方法 ：参数 ：
$bob = $urlRouter.href(new UrlMatcher("/about/:person"),{
person: "bob"
});
$bob == "/about/bob";
sync();
sync();
$state 依赖 ：$rootScope $q $view $injector $resolve $stateParams $urlRouter方法 ：参数 ：
方法 ：
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
});
事件 ：$stateChangeError $stateChangeStart $stateChangeSuccess $stateNotFound
$stateProvider
依赖 ：$urlRouterProvider $urlMatcherFactoryProvider方法 ：decorator(name,func);
$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的名称绑定完对应的页面模板。state(name,stateConfig); 参数 ：
ui-sref
a ui-sref ="app.index" > 首页a >
<!-- 这里是正常的跳转 -->
="app.index({id:yourId})" > 你的主页 这里是带参数对象的跳转，名称是id，值是yourId -->
简单的使用代码(ui-router的单视图)：
ng-app ="Demo" ng-controller ="testCtrl as ctrl" >
ol li >< ="app" > app></ ="test" > test>
ui-view script 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 >
li a ui sref app.page1 > a>< app.page2 li
ol>
="'nav2.html'" test.page1({id:1}) test.page1 test.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
Angular UI-Router $ urlRouterProvider。不工作时*不再* 问： .when()我的$urlRouterProvider工作了吗？
我选择了一个相当强大的角度应用程序。我一直试图解决的最新问题是“页面刷新时丢失的用户凭据”问题。
当我拿起项目的auth服务时，并没有多大意义，在深入研究后，我发现它是从几页随机代码中组合而成的。它也不能完全正常工作，因此我研究了不同的来源，并决定完全实现其中之一（angular-client-side-auth）
现在，我实现的身份验证服务/控制器与 angular-client-side-auth
在这一点上，我已经使用户保持刷新状态登录，路由正在与它们的身份验证一起使用（以前使用大容量代码来禁用视图中的元素），但是现在$urlRouterProvider.when()s已损坏。他们以前工作得非常好，所以我知道我做过的事情就是要犯错-但我不能简单地撤消已实现的事情！
这是我正在使用的$ urlRouterProvider代码。值得一提的是，我已经包含/需要了.when()，而angular-client-side-auth似乎并没有使用它们。我希望它们可以用该代码实现，但是可能其中有些东西使.when()？的功能无效。我不这么认为。可能还需要澄清，我还没有使用.rule或$httpProvider.interceptors。我尝试使用已实现这些功能的网站，但它们似乎没有什么不同。
$urlRouterProvider .when(''/myState/group'', [''$state'', ''myService'', function ($state, myService) { $state.go(''app.myState.group.id'', {id: myService.Params.id}); }]) .otherwise(''/'');因此，基本上，如果用户或站点将用户定向到/myState/group，则他们实际上应该以状态app.myState.group.id正确的URL结尾？他们没有，但我不知道为什么。关于使用urlRouterProvider的问题并没有太多。
什么 没有 发生？好了，/myState/group加载视图很好，并且在其中<ui-view>是生成的列表id。您可以单击一个ID，该ID会调用一个函数，该函数设置ID然后执行$state.go(''app.myState.group.id'',{id: group.id, std: $scope.std1}); 。当然，该状态将替换用户单击的“生成列表”。
现在，对于.state()…
.state(''app.myState'', { abstract: true, url: ''/myState'', templateUrl: ''views/myState.html'', data: { access: access.user }, controller: ''MyCtrl'', resolve: { // bunch of stuff here, I''ll include it if it''s relevant }, redirectMap: { ''409'': ''app.error'' } }) .state(''app.myState.group'', { url: ''/group'', templateUrl: ''views/myState.group.html'', data: { access: access.user } }) .state(''app.myState.group.id'', { url: ''/:id'', templateUrl: ''views/myState.group.id.html'', data: { access: access.user }, resolve: { '''': function (myService) { myService.stuff.get(false, false, 7, 0).then(function (data) { }); } }, controller: ''MygroupidCtrl'' })最后， index.html
<li ng-> <a ui-sref="app.myState.group">My State</a> </li>
不知何故，我觉得有一种更好的方法来构造它。据我所知，app.myState.group实际上并不需要 它 ，它只是嵌套的一部分。
我试图将更ui-sref改为="app.myState.group.id"。如果那没用，我也改成$state.includes(''app.myState'')}了$state.includes(''app.myState.group'')}。不。这可行吗？我知道我必须以某种方式传递ID，但似乎并没有指示。
理想情况下，我想限制不必要状态的数量（以及控制器..以及所有内容）。由于用户应该/myState/group/id在单击链接时直接被带到，因此我认为那应该发生。这不是链接到另一个状态，然后重定向！
就是说，我更关心现在只是使它工作，而以后我会担心清理。
编辑
因此，当我写问题时，我对尝试的事情有了更多的想法。其中之一实际有效！
.state(''app.myState.group'', { url: ''/group'', templateUrl: ''views/myState.group.html'', data: { access: access.user }, onEnter: [''$state'', ''$timeout'', ''myService'', function ($state, $timeout, myService) { $timeout(function () { $state.go(''app.myState.group.id'', {id: myService.Params.id}) }, 1000); }]我喜欢它，尽管我仍然想知道是否还有其他方法可以做到这一点。我也很好奇为什么$ urlRouterProvider停止工作！
答案1 小编典典 编辑：版本0.2.13-重大更改
原始帖子正在使用UI-Router 0.2.12-。0.2.13中的修复程序禁用了此解决方案。请在此处遵循解决方法：
Angular UI-Router $ urlRouterProvider。当我单击时不起作用 原版的：
我发现有一个问题，引起了类似的问题。有一个带有完整代码的有效示例
首先，让我们有两个功能来配置
$urlRouterProvider 和 $stateProvider这些定义的摘要：
// when config for $urlRouterProvidervar whenConfig = [''$urlRouterProvider'', function($urlRouterProvider) { $urlRouterProvider .when(''/app/list'', [''$state'', ''myService'', function ($state, myService) { $state.go(''app.list.detail'', {id: myService.Params.id}); }]) .otherwise(''/app'');}];// state config for $stateProvidervar stateConfig = [''$stateProvider'', function($stateProvider) { $stateProvider .state(''app'', { url: ''/app'', ...}];有了这个，如果我们这样称呼他们，举报的行为就会停顿：
angular.module(''MyApp'', [ ''ui.router''])// I. firstly the states.config(stateConfig)// II. then the WHEN.config(whenConfig)上面的调用将不起作用。访问列表时，何时将不会触发详细信息状态。
但这将按预期工作：
angular.module(''MyApp'', [ ''ui.router''])// I. firstly WHEN.config(whenConfig) // II. only then call state config.config(stateConfig)在这里检查。查看 app.js
简介：我们只需要首先配置$urlRouterProvider 。只有这样我们才能开始通过填写我们的州$stateProvider。这种方法将导致预期的行为。
Angular UI-Router $ urlRouterProvider。单击时不起作用 我.when(''/center'', ''/center/question'')在我的角度web应用程序。
当我''/center''在浏览器中键入内容时，它会重定向到''/center/question''我期望的位置，但是当我单击时<aui-sref="center" href="#/center"></a>，它不会重定向，而是停留在url上''/center''。
我的控制台没有错误，我也不知道为什么。
当不再工作时 我在这里看到了一个类似的问题AngularUI-Router$urlRouterProvider。我尝试了答案，但它仍然对我不起作用。
这是我的coffeescript代码：
whenConfig = [''$urlRouterProvider'', ($urlRouterProvider) -> # default url config $urlRouterProvider .otherwise ''/center'' .when ''/center'', ''/center/question'']stateConfig = [''$stateProvider'', ($stateProvider) -> # nested url config capitalize = (s)-> s[0].toUpperCase() + s[1..] mainConfig = ({ name: name url: "/#{name}" templateUrl: "templates/#{name}.html" controller: "#{capitalize name}Ctrl" } for name in [''center'', ''keywordList'', ''keywordConfig'', ''log'', ''stat'']) centerConfig = ({ name: "center.#{name}" url: "/#{name}?page" templateUrl: "templates/center/#{name}.html" controller: "Center#{capitalize name}Ctrl" resolve: thead: (CenterService) -> CenterService.getThead @self.name data: (CenterService, $stateParams) -> CenterService.fetchItems @self.name, $stateParams.page } for name in [''question'', ''answer'', ''comment'', ''article'']) for singleConfig in mainConfig $stateProvider.state singleConfig for childConfig in centerConfig $stateProvider.state childConfig]app.config whenConfigapp.config stateConfig答案1 小编典典 先前的解决方案
如何：设置默认/索引子状态
$urlRouterProvider.when(''/home'', ''/home/index'');因此，这是上述问答中显示的解决方案：
var whenConfig = [''$urlRouterProvider'', function($urlRouterProvider) { $urlRouterProvider .when(''/app/list'', [''$state'', ''myService'', function ($state, myService) { $state.go(''app.list.detail'', {id: myService.Params.id}); }]) .otherwise(''/app'');}];...app.config(whenConfig) 现在-我们不能。
UI路由器“ FIX”在 0.2.13
Bug修复$状态：
这是urlRouter.js中添加的新代码：
if (lastPushedUrl && $location.url() === lastPushedUrl) // this line stops the corrent .when to work return lastPushedUrl = undefined;lastPushedUrl = undefined;这段代码正在优化/修复其他问题 ……而且，关闭了.when()功能
解
var onChangeConfig = [''$rootScope'', ''$state'', function ($rootScope, $state) { $rootScope.$on(''$stateChangeStart'', function (event, toState) { if (toState.name === "app.list") { event.preventDefault(); $state.go(''app.list.detail'', {id: 2}); } });}]
Angular UI-Router $ urlRouterProvider不工作时*不再*
问： .when()我的$urlRouterProvider工作了吗？
我选择了一个相当强大的角度应用程序。我一直试图解决的最新问题是“页面刷新时丢失的用户凭据”问题。
当我拿起项目的auth服务时，并没有多大意义，在深入研究后，我发现它是从几页随机代码中组合而成的。它也不能完全正常工作，因此我研究了不同的来源，并决定完全实现其中之一（angular-client-side-auth）
现在，我实现的身份验证服务/控制器与 angular-client-side-auth
在这一点上，我已经使用户保持刷新状态登录，路由正在与它们的身份验证一起使用（以前使用大容量代码来禁用视图中的元素），但是现在$urlRouterProvider
.when()s已损坏。他们以前工作得非常好，所以我知道我做过的事情就是要犯错-但我不能简单地撤消已实现的事情！
这是我正在使用的$ urlRouterProvider代码。值得一提的是，我已经包含/需要了.when()，而angular-client-side-auth似乎并没有使用它们。我希望它们可以用该代码实现，但是可能其中有些东西使.when()？的功能无效。我不这么认为。可能还需要澄清，我还没有使用.rule或$httpProvider.interceptors。我尝试使用已实现这些功能的网站，但它们似乎没有什么不同。
$urlRouterProvider
.when('/myState/group',['$state','myService',function ($state,myService) {
$state.go('app.myState.group.id',{id: myService.Params.id});
}])
.otherwise('/');
因此，基本上，如果用户或站点将用户定向到/myState/group，则他们实际上应该以状态app.myState.group.id正确的URL结尾？他们没有，但我不知道为什么。关于使用urlRouterProvider的问题并没有太多。
什么 没有 发生？好了，/myState/group加载视图很好，并且在其中<ui-view>是生成的列表id。您可以单击一个ID，该ID会调用一个函数，该函数设置ID然后执行$state.go('app.myState.group.id',{id: group.id,std: $scope.std1}); 。当然，该状态将替换用户单击的“生成列表”。
现在，对于.state()…
.state('app.myState',{
abstract: true,url: '/myState',templateUrl: 'views/myState.html',data: {
access: access.user
},controller: 'MyCtrl',resolve: {
// bunch of stuff here,I'll include it if it's relevant
},redirectMap: {
'409': 'app.error'
}
})
.state('app.myState.group',{
url: '/group',templateUrl: 'views/myState.group.html',data: {
access: access.user
}
})
.state('app.myState.group.id',{
url: '/:id',templateUrl: 'views/myState.group.id.html',resolve: {
'': function (myService) {
myService.stuff.get(false,false,7,0).then(function (data) {
});
}
},controller: 'MygroupidCtrl'
})
最后， index.html
<li ng-> <a ui-sref="app.myState.group">My State</a> </li>
不知何故，我觉得有一种更好的方法来构造它。据我所知，app.myState.group实际上并不需要 它 ，它只是嵌套的一部分。
我试图将更ui-sref改为="app.myState.group.id"。如果那没用，我也改成$state.includes('app.myState')}了$state.includes('app.myState.group')}。不。这可行吗？我知道我必须以某种方式传递ID，但似乎并没有指示。
理想情况下，我想限制不必要状态的数量（以及控制器..以及所有内容）。由于用户应该/myState/group/id在单击链接时直接被带到，因此我认为那应该发生。这不是链接到另一个状态，然后重定向！
就是说，我更关心现在只是使它工作，而以后我会担心清理。
编辑
因此，当我写问题时，我对尝试的事情有了更多的想法。其中之一实际有效！
.state('app.myState.group',onEnter: ['$state','$timeout',$timeout,myService) {
$timeout(function () {
$state.go('app.myState.group.id',{id: myService.Params.id})
},1000);
}]
我喜欢它，尽管我仍然想知道是否还有其他方法可以做到这一点。我也很好奇为什么$ urlRouterProvider停止工作！
Angular UI-Router $ urlRouterProvider单击时不起作用
我.when('/center','/center/question')在我的角度web应用程序。
当我'/center'在浏览器中键入内容时，它会重定向到'/center/question'我期望的位置，但是当我单击时<aui-sref="center" href="#/center"></a>，它不会重定向，而是停留在url上'/center'。
我的控制台没有错误，我也不知道为什么。
当不再工作时 我在这里看到了一个类似的问题AngularUI-Router$urlRouterProvider。我尝试了答案，但它仍然对我不起作用。
这是我的coffeescript代码：
whenConfig = ['$urlRouterProvider',($urlRouterProvider) ->
# default url config
$urlRouterProvider
.otherwise '/center'
.when '/center','/center/question'
]
stateConfig = ['$stateProvider',($stateProvider) ->
# nested url config
capitalize = (s)->
s[0].toUpperCase() + s[1..]
mainConfig = ({
name: name
url: "/#{name}"
templateUrl: "templates/#{name}.html"
controller: "#{capitalize name}Ctrl"
} for name in ['center','keywordList','keywordConfig','log','stat'])
centerConfig = ({
name: "center.#{name}"
url: "/#{name}?page"
templateUrl: "templates/center/#{name}.html"
controller: "Center#{capitalize name}Ctrl"
resolve:
thead: (CenterService) ->
CenterService.getThead @self.name
data: (CenterService,$stateParams) ->
CenterService.fetchItems @self.name,$stateParams.page
} for name in ['question','answer','comment','article'])
for singleConfig in mainConfig
$stateProvider.state singleConfig
for childConfig in centerConfig
$stateProvider.state childConfig
]
app.config whenConfig
app.config stateConfig
今天关于【ionic+angularjs】angularjs ui-router路由简介 和$urlRouter、$state、$stateProvider、ui-sref.... 的介绍到此结束，谢谢您的阅读，有关Angular UI-Router $ urlRouterProvider。不工作时*不再*、Angular UI-Router $ urlRouterProvider。单击时不起作用、Angular UI-Router $ urlRouterProvider不工作时*不再*、Angular UI-Router $ urlRouterProvider单击时不起作用 等更多相关知识的信息可以在本站进行查询。
