Apply condition on templateUrl in config while routing

Question

I'm using ui-router and developed a multi-lingual website using angular-translate but currently I'm stuck where I want such scenario:

There will be 2 template for a single page one will be normal version which is would be English and working as normal site and second template would be consisting of translate="" attribute, in other words fully translated page. But I'm willing if I could have conditions while routing so this would resolve my issue. Looking at code could make it easier for you to understand.

Currently my code looks like:

.state('whoweAre', {
            url: '/about-us',
            templateUrl: 'templates/whoweAre/whoweAre.html', 
            controller: 'whoweAreCtrl'
        }
    )

but now currently I'm want something like

    .state('whoweAre', {
            url: '/about-us',
            templateUrl: function(isTranslated){
             if(isTranslated){
              return "templates/translated/whoweAre/whoweAre.html";
             }
             else{
               return "templates/whoweAre/whoweAre.html";
             }
            }, 
            controller: 'whoweAreCtrl'
        }
    )

but this doesn't seems to be working and I have this isTranslated variable in app.js and I can't access it in config (routes.js) file for me. Any work around related to this would be great. I'm using this because when user arrives for a first time angular translate text seems to be empty and tags appears with empty tags which is leading towards bad UX. Any help would be appreciated. Thanks !

You should get the answer here https://stackoverflow.com/q/33838313 — Radim Köhler, Jul 25 '17 at 11:56

score 1 · Answer 1 · answered Jul 25 '17 at 12:38

You can find current state and set the template dynamically in app.js

In your app.js check the state

 $rootScope.$on('$stateChangeStart', function(event, next) {

                if(next.name=="whoweAre" && isTranslated)
                {
                  next.templateUrl="templates/translated/whoweAre/whoweAre.html";
                }
                else if(next.name=="whoweAre" && !isTranslated)
               {
                  next.templateUrl="templates/whoweAre/whoweAre.html";
               }

score 0 · Accepted Answer · answered Aug 01 '17 at 04:57

After more research I found this way useful. Thanks folks for all your help.

templateProvider:
  function(AppService) {
    if(AppService.getLocal("language").locale != 'en' )
    return "translated template url";
    else
    return "normal page"
  }

Apply condition on templateUrl in config while routing

2 Answers2