Start Angular.js route-segment or ui-router after all translations are loaded

Question

Is there any way, how to start ui-router or route-segment just after translateProvider loads its translations?

I'm using pascal prechts translate filter together with bind once {{:: }} notation. On localhost it works pretty good, but when I test it on remote server, bind once will remove watchers sooner than strings are translated.

So I was wondering if there is some way how to delay routing a little bit.

Answer 1

Try to check the native, built-in feature:

$urlRouterProvider.deferIntercept(defer)

Disables (or enables) deferring location change interception.

If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.

Check some similar issues:

• AngularJS - UI-router - How to configure dynamic views
• can we add dynamic states to $stateprovider with already existing states in ui-router angular.js

In one of these links, observe this plunker, where this feature is used like this:

Stop and wait in .config() phase:

.config(['$urlRouterProvider' ...,
    function($urlRouterProvider, ...) {

      // defer execution in config phase
      $urlRouterProvider.deferIntercept();
      ...

Later in .run() phase turn the url hanlding on

.run(['$urlRouter' ...,
  function($urlRouter...) {
    ...
    $http
      .get("modules.json")
      .success(function(data) {
        
        // do some stuff
        // re-enable UI-Router url stuff
    
        $urlRouter.sync();
        $urlRouter.listen();
    
      });