load ui router template after promise resolved

Question

I'd like to get localized templates like:

'/templates/en/main/index'
'/templates/fr/main/index'

so each time I have a templateUrl, I wrap it in a function which relies on a global variable bearing the locale like so:

templateUrl: function(){ return localizePath('/templates/main/index'); }
// returns '/templates/locale/main/index' depending on he locale

I have to retrieve the locale through an ajax call so I obviously need to pause state activation. I tried the following but it doesnt stop the router to try to fetch the template:

var initialized = false;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
  if (!initialized) {
    event.preventDefault();
    return sessionSvc.getLocale.then(function() {
      initialized = true;
      $state.go(toState, toParams);
    });
  }
});

Then the router tries to get the template at the following path: '/templates/undefined/main/index'.

How could I make the ui-router wait before trying to fetch the template?

That's not going to help you solve the templates problem. But I suggest that instead of trying to have a template per location, that you use a kind of dictionary of different languages and load a different one according to the selected locale, check out https://github.com/angular-translate/angular-translate — Sami Triki, Jul 26 '16 at 09:05

score 3 · Accepted Answer · edited May 23 '17 at 11:44

The templateUrl function doesn't work in an async way but you can do this by using a templateProvider function that returns a resolved template and wait for this call by a resolve property. If you only need this once, the best way is to probably define your resolve in the root state and cache the resulting value via a service.

See this answer for more details on how you could implement it: ui-router: async data in templateUrl function

load ui router template after promise resolved

1 Answers1