Discover a fully functional plunker here
You can achieve this with the help of UI-Router. Start by creating a super parent state named 'root', with a parameter called lang
.state('root', {
url: '/{lang:(?:en|he|cs)}',
abstract: true,
template: '<div ui-view=""></div>',
params: {lang : { squash : true, value: 'en' }}
})
One key feature is using regular expressions in the url to limit matching lang options (such as English, Hebrew, and Czech):
url: '/{lang:(?:en|he|cs)}',
Learn more about it here.
Utilize params : {} setting to specify default value as 'en', with option to be squashed if there's a match with 'en' param value:
params: {lang : { squash : true, value: 'en' }}
Read more at this link or here
The root state serves as the parent to all other states, simply defined by adding parent : 'root':
.state('home', {
parent: 'root',
url: "/",
templateUrl: "Assets/app/templates/home.html",
controller: 'homeController'
})
.state('activity', {
parent: 'root',
url: "/activity",
templateUrl: "Assets/app/templates/gallery.html",
controller: 'galleryController'
})
.state('page', {
parent: 'root',
url: '/page/:pagename',
templateUrl: "Assets/app/templates/page.html",
controller: 'pageController'
});
These navigation links will now function properly:
ui-sref for 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 for 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 for English:
<a href="#/">#/</a>
<a href="#/activity">#/activity</a>
<a href="#/page/three">#/page/three</a>
href for Hebrew:
<a href="#/he/">#/he/</a>
<a href="#/he/activity">#/he/activity</a>
<a href="#/he/page/three">#/he/page/three</a>
See it live in action here