AngularJS: setting $routeProvider after the app is bootstrap?

Question

I'm building a multilingual app and I'm wondering if it's possible to set the angular-route paths dynamically, ie. so that I can switch the slug from English to Spanish (/#/login becomes /#/iniciar).

I am using angular-translate and require.js lazy-loading, so my translated strings are loaded after the app is bootstrap. So I would need to be able to change the routes after the app has been bootstrap.

Is this possible using angular-route, or maybe even using angular-ui's ui-router instead...?

Something like:

app.config(function ($routeProvider, SomeLanguageService) {
  var pathSlugs = SomeLanguageService.getRouteSlugs('ES');

  $routeProvider
    .when('/' + pathSlugs.home , {
      templateUrl: '/home/home.html',
      controller: ''
    });
});

score 2 · Answer 1 · edited May 23 '17 at 10:30

The way with UI-Router including working plunker is shown here: AngularJS - UI-router - How to configure dynamic views

The trick is to, keep the reference to provider configuration in the config phase, and use it later in run phase

var $stateProviderRef;
app.config(['$stateProviderRef',
  function ($stateProviderRef) 
  {
    $stateProviderRef = $stateProvider; // this configuration API
  }])

And now even in run we can still access that provider configuration API, to define states

app.run([ SomeLanguageService
  function (SomeLanguageService) 
  {
      var pathSlugs = SomeLanguageService.getRouteSlugs('ES');
      // define state as needed
      var state = {
        "url": '/' + pathSlugs.home + ...,
        "parent" : ...,
        "abstract": ...
        "views": {}
      };
      // inject that in to the configuration
      $stateProviderRef.state(value.name, state);
     ...

AngularJS: setting $routeProvider after the app is bootstrap?

1 Answers1