有一个工作plunker
与往常一样,这是可行的UI-Router
- 内置功能。首先,我们将引入名为“root”的超级父状态。它会定义参数lang
.state('root', {
url: '/{lang:(?:en|he|cs)}',
abstract: true,
template: '<div ui-view=""></div>',
params: {lang : { squash : true, value: 'en' }}
})
有趣的事情要提到:url
使用正则表达式来减少匹配的 lang 词的数量(在我们的例子中,英语、希伯来语和捷克语):
url: '/{lang:(?:en|he|cs)}',
阅读更多,例如在这里。
此外,我们确实从名为 的设置中获利params : {}
。它说,默认值是'en'
,更重要的是 - 如果与“en”参数值匹配,它应该被压缩,跳过:
params: {lang : { squash : true, value: 'en' }}
阅读更多,例如这里或这里
所以,这是我们的父状态,根状态,我们只是将其应用于具有状态定义设置的所有状态parent : 'root'
:
.state('home', {
parent: 'root', // parent will do the magic
url: "/",
templateUrl: "Assets/app/templates/home.html",
controller: 'homeController'
})
.state('activity', {
parent: 'root', // parent magic
url: "/activity",
templateUrl: "Assets/app/templates/gallery.html",
controller: 'galleryController'
})
.state('page', {
parent: 'root', // magic
url: '/page/:pagename',
templateUrl: "Assets/app/templates/page.html",
controller: 'pageController'
});
现在这些链接将起作用:
ui-sref英文:
<a ui-sref="home({lang: 'en'})">home({lang: 'en'})</a>
<a ui-sref="activity({lang: 'en'})">activity({lang: 'en'})</a>
<a ui-sref="page({pagename:'one', lang: 'en'})">page({pagename:'one', lang: 'en'})</a>
ui-sref希伯来语:
<a ui-sref="home({lang: 'he'})">home({lang: 'he'})</a>
<a ui-sref="activity({lang: 'he'})">activity({lang: 'he'})</a>
<a ui-sref="page({pagename:'two', lang: 'he'})">page({pagename:'two'})</a>
href英文:
<a href="#/">#/</a>
<a href="#/activity">#/activity</a>
<a href="#/page/three">#/page/three</a>
href希伯来语:
<a href="#/he/">#/he/</a>
<a href="#/he/activity">#/he/activity</a>
<a href="#/he/page/three">#/he/page/three</a>
在这里检查它的行动