CODEWITHSUNDEEP
javascriptangularjslocalizationangular-ui-routersingle-page-application
Gary Justin
Gary Justin

Reputation: 204

Option url path UI-Router

In my angular application, I am making heavy use of nested states with UI-Router.

I am trying to create a parent state that determines the locale of the application based on a URL that has an optional locale path.

the '/es' is required for Spanish, but English is implied by the parameter missing and I would prefer to not have the '/en'.

I want any child state of this one to inherit that locale value.

$stateProvider
    .state('localization', {
        abstract: true,
        url: '/:locale?',
        params: {
            locale: { value: 'en' }
        }
    })
    .state('search', {
        url: '/search',
        parent: 'localization'
    });

I'd like to be able to use $stateParams.locale in any of the child states.

Upvotes: 1

Views: 735

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123851

There is almost the same Q & A: Angular js - route-ui add default parmeter or another here

The solution is to create root state like this:

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

Any child state then can just use this as a parent:

.state('home', {
    parent: 'localization', // parent will do the magic
    url: "/",
    ...
})
.state('activity', {
    parent: 'localization',
    ...

Check it here, where is also fully working plunker

Upvotes: 1

Related Questions