AngularJS: optional language param into url

Question

I'm working with angularjs and UI-Router. I'd like to configure routes which specify the selected language. though this part of the route should be optional.

I have following states:

{
    state: 'app',
    config: {
          abstract: true,
          url: '/{lang:(?:de|en)}',
          template: '<ui-view/>'
    }
}

{
    state: 'app.mainview',
    config: {
          url: '/mainview',
          templateUrl: 'app/mainview/mainview.html',
          controller: 'MainviewController',
          controllerAs: 'vm',
          title: 'Main View',
          settings: {
              pos: 1,
              displayName: 'Mainview',
              icon: 'code-array'
          }
    }
}

now its only possible to navigate to mainview with

example.com/en/mainview

Though I'd like to configure the ui-router so that all o the following routes are valid:

example.com/mainview
example.com/en/mainview
example.com/de/mainview

Can I set a route with an optional language param at the beginning without using a double slash? If no, what alternatives do you suggest?

Community · Accepted Answer · 2017-05-23 11:58:56Z

5

There is a solution in detail described here

where you basically introduce parent state

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

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Sep 23, 2015 at 13:23

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahmoud Elgohary Over a year ago

how i can change lang in any state without change it as example from /en/hello to /de/hello without reload

Collectives™ on Stack Overflow

AngularJS: optional language param into url

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related