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

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

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

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

例如：

>主页英语 – > http://example.com/
> Home Hebrew – > 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'
        });

解决方法

有 a working 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:(?:en|he|cs)}',

阅读more e.g. here.

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

params: {lang : { squash : true,value: 'en' }}

阅读more e.g. here或here

所以,这是我们的父,root状态,我们只是将其应用于状态定义设置为parent的所有状态：’root’：

.state('home',{
    parent: 'root',// parent will do the magic
    url: "/",controller: 'homeController'
})
.state('activity',// parent magic
    url: "/activity",controller: 'galleryController'
})
.state('page',// magic
    url: '/page/:pagename',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>

检查它in action here