Angular js - route-ui添加默认参数

24s*_*ron 6 javascript angularjs angular-ui angular-ui-router

在我的应用程序中,我使用角度UI路由器.

我有当地人(英语和希伯来语)我的基本语言是英语.

这就是为什么我想要的语言是英语不要将参数添加到网址

例如:

  • Home English - > http://example.com/
  • Home希伯来语 - > http://example.com/he/

  • 关于我们English - > http://example.com/about

  • 关于我们希伯来语 - > http://example.com/he/about

这可能吗 ?

这是我目前的代码

$stateProvider
        .state('/', {
            url: "/",
            templateUrl: "Assets/app/templates/home.html",
            controller: 'homeController'
        })
        .state('activity', {
            url: "/activity",
            templateUrl: "Assets/app/templates/gallery.html",
            controller: 'galleryController'
        })
        .state('page', {
            url: '/:pagename',
            templateUrl: "Assets/app/templates/page.html",
            controller: 'pageController'
        });
Run Code Online (Sandbox Code Playgroud)

Rad*_*ler 9

一个工作的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' }}
})
Run Code Online (Sandbox Code Playgroud)

有趣的事情要提到:url使用regexp来减少匹配语言的数量(在我们的例子中,英语,希伯来语和捷克语):

url: '/{lang:(?:en|he|cs)}',
Run Code Online (Sandbox Code Playgroud)

阅读更多,例如这里.

此外,我们从一个叫做的设置中获利params : {}.它说,默认值是'en',更重要的是 - 它应该被压扁,如果与'en'param值匹配则跳过:

params: {lang : { squash : true, value: 'en' }}
Run Code Online (Sandbox Code Playgroud)

阅读更多内容,例如此处此处

所以,这是我们的父状态root状态,我们将它应用于具有状态定义设置的所有状态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'
});
Run Code Online (Sandbox Code Playgroud)

现在这些链接可以工作:

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> 
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

href英文:

<a href="#/">#/</a>
<a href="#/activity">#/activity</a>
<a href="#/page/three">#/page/three</a>
Run Code Online (Sandbox Code Playgroud)

href希伯来语:

<a href="#/he/">#/he/</a>
<a href="#/he/activity">#/he/activity</a>
<a href="#/he/page/three">#/he/page/three</a>
Run Code Online (Sandbox Code Playgroud)

在这里检查它