Angularjs - router-ui 添加默认参数

Posted 2023-03-05

【中文标题】Angularjs - router-ui 添加默认参数

【英文标题】：Angular js - route-ui add default parmeter

【发布时间】：2015-10-06 04:55:17

【问题描述】：

在我的应用中，我使用 angular UI-Router。

我有当地人（英语和希伯来语） 我的基本语言是英语。

这就是为什么我希望语言是英语不要将参数添加到 url

例如：

首页英语 --> http://example.com/

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

关于我们英文 --> 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'
        );

【参考方案1】：

有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 使用正则表达式来减少匹配语言单词的数量（在我们的例子中是英语、希伯来语和捷克语）：

url: '/lang:(?:en|he|cs)',

阅读more e.g. here。

此外，我们确实从称为 params : 的设置中获利。它说，默认值是 'en' 更重要的是 - 它应该被压扁，如果与 'en' 参数值匹配则跳过：

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

阅读more e.g. here或here

所以，这是我们的父状态，根状态，我们只需将其应用于具有状态定义设置的所有状态 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>

查看in action here