角JS - 路由的UI添加默认parmeter [英] Angular js - route-ui add default parmeter

问题描述

在我的应用我用角UI的路由器。

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

这就是为什么我想，如果语言是英语不将参数添加到URL

例如：

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



• 首页希伯来语 - > http://example.com/he/




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



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

这可能吗？

这是我目前的code

  $ stateProvider
        .STATE（'/'，{
            网址：/，
            templateUrl：资产/应用/模板/ /home.html的，
            控制器：HomeController的
        }）
        .STATE（'活动'，{
            网址：/活动，
            templateUrl：资产/应用/模板/ gallery.html
            控制器：'galleryController
        }）
        .STATE（页面'，{
            网址：'/：页面名'，
            templateUrl：资产/应用/模板/ page.html即可
            控制器：'的PageController
        }）;
 

解决方案

有一个工作plunker

一如往常，这是可行的UI路由器 - 内置的功能。首先，我们会介绍打了个比方'根'超级父状态。这本来定义的参数 郎

  .STATE（'根'，{
    网址：'/ {郎:( ?: EN |他| CS）}
    摘要：真实，
    模板：'＆LT;格UI视图=＆GT;＆LT; / DIV＆GT;，
    PARAMS：{郎咸平：{壁球：真，值：'恩'}}
}）
 

有趣的事情提：在 网​​址 使用正则表达式来减少匹配郎的话量的（在我们的例子中，英语，希伯来语和捷克）的：

  URL：/ {郎:( ?: EN |他| CS）}
 

例如这里。

另外，我们的利润来自一个名为 PARAMS设置：{} 。它说，该默认值为 成en 并更重要的是 - 它应该被压扁​​，跳过如果没有与火柴恩'参数值：

  params：一个{郎咸平：{壁球：真，值：'恩'}}
 

例如这里或这里

所以，这就是我们的父母，根状态，我们只是将适用于所有国家的状态定义设置的 父：'根' ：

  .STATE（'家'，{
    父：'根'，//父母会做的魔力
    网址：/，
    templateUrl：资产/应用/模板/ /home.html的，
    控制器：HomeController的
}）
.STATE（'活动'，{
    父：'根'，//父魔术
    网址：/活动，
    templateUrl：资产/应用/模板/ gallery.html
    控制器：'galleryController
}）
.STATE（页面'，{
    父：'根'，//魔术
    网址：'/页/：页面名'，
    templateUrl：资产/应用/模板/ page.html即可
    控制器：'的PageController
}）;
 

而现在这些链接将工作：

UI-SREF 英语：

 ＆LT;一个UI的SREF =家（{郎咸平：'恩'}）＆GT;家（{郎咸平：'恩'}）LT; / A＆GT;
＆LT;一个UI的SREF =活动（{郎咸平：'恩'}）＆GT;活动（{郎咸平：'恩'}）LT; / A＆GT;
＆LT;一个UI的SREF =页面（{页面名称：一，郎咸平：'恩'}）＆gt;页面（{页面名称：一，郎咸平：'恩'}）LT; / A＆GT;
 

UI-SREF 希伯来语：

 ＆LT;一个UI的SREF =家（{郎咸平：'他'}）＆GT;家（{郎咸平：'他'}）LT; / A＆GT;
＆LT;一个UI的SREF =活动（{郎咸平：'他'}）＆GT;活动（{郎咸平：'他'}）LT; / A＆GT;
＆LT;一个UI的SREF =页面（{页面名称：两节，郎咸平：'他'}）＆gt;页面（{页面名称：'二'}）LT; / A＆GT;
 

的href 英语：

 ＆LT; A HREF =＃/＆GT;＃/＆LT; / A＆GT;
＆LT; A HREF =＃/活动＆GT;＃/活性LT; / A＆GT;
＆LT; A HREF =＃/页/三＆GT;＃/页/三相＆LT; / A＆GT;
 

的href 希伯来语：

 ＆LT; A HREF =＃/他/＆GT;＃/他/＆LT; / A＆GT;
＆LT; A HREF =＃/他/活动＆GT;＃/他/活性LT; / A＆GT;
＆LT; A HREF =＃/他/页/三＆GT;＃/他/页/三相＆LT; / A＆GT;
 

检查一下在行动这里

In my app I use angular UI-Router.

I have locals (English and Hebrew) My base language is English.

Thats why i want if the language is English not to add the parameter to the url

For example:

• Home English --> http://example.com/

• Home Hebrew --> http://example.com/he/

• About us English --> http://example.com/about

• About us Hebrew --> http://example.com/he/about

Is this possible ?

This is my current code

$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'
        });

解决方案

There is a working plunker

As always, that is feasible with UI-Router - built in features. Firstly, we'd introduce the super parent state called for example 'root'. It would have defined parameter lang

.state('root', {
    url: '/{lang:(?:en|he|cs)}',
    abstract: true,
    template: '<div ui-view=""></div>',
    params: {lang : { squash : true, value: 'en' }}
})

Interesting things to mention: The url uses regexp to reduce amount of matching lang words (in our case, English, Hebrew and Czech) :

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

Read more e.g. here.

Also, we do profit from a setting called params : {}. It says, that the default value is 'en' and what is more important - it should be squashed, skipped if there is a match with 'en' param value:

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

Read more e.g. here or here

So, this is our parent, root state, which we just would apply to all states with a state definition setting 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'
});

And now these links would work:

ui-sref English:

<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 Hebrew:

<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 English:

<a href="#/">#/</a>
<a href="#/activity">#/activity</a>
<a href="#/page/three">#/page/three</a>

href Hebrew:

<a href="#/he/">#/he/</a>
<a href="#/he/activity">#/he/activity</a>
<a href="#/he/page/three">#/he/page/three</a>

Check it in action here

这篇关于角JS - 路由的UI添加默认parmeter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！