Search code examples
javascriptangularjsangular-ui-routeruser-experienceangular-translate

Apply condition on templateUrl in config while routing


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

  1. 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 !


Solution

  • 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"
      }