Angular js - route-ui add default column

Question

In my application I use angular UI-Router.

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

This is why I want the parameter to not be added to the URL in English

For instance:

• Russian → 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 it 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' }); 

Answer 1

There is a working plunker

As always, this is possible using the UI-Router - built-in functions. First, we introduce a super parental state called, for example, "root". He would define the lang parameter

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

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

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

Read more, for example. here .

In addition, we profit from params : {} . It says that the default value is 'en' , and more importantly - it should be compressed, skipped if there is a match with the parameter "en" param:

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

Read more, for example. here or here

So, this is our parent, root state, which we would apply to all states with the parent : 'root' state definition configured:

 .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 will 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> 

Mark in action here