ui-router dynamic template path

Question

I\'m using ui-router 0.2.8. I\'m wanting to load a template based on device width. I can get the device width without issue, set it in the scope etc but I can figure out how

Answer 1

You might be looking for dynamic template name based on the state params

 $stateProvider.state('contacts', {
   templateUrl: function ($stateParams){
     return '/partials/contacts.' + $stateParams.filterBy + '.html';
   }
 })

See the docs for more information https://github.com/angular-ui/ui-router/wiki#templates

Answer 2

This reference here was great for me figuring out how to do dynamic templates in angular, but I'd like to update with my own solution.

• Solution 1 based on Dipesh Kc's (this works great for redefining parent templateUrl for abstract states) Notice I used toParams instead of $stateParams:

  // custom parent template
  .state('template', {
      abstract: true,
      url: "/tm/:tmfolder/:tmview",
      templateUrl: function (toParams) {
          return 'views/' + toParams.tmfolder + '/' + toParams.tmview + '.html';
      },
  })
  .state('template.contacts', {
      url: "/contacts/:folder/:view",
      templateUrl: function (toParams) {
          return 'views/' + toParams.older + '/' + toParams.view + '.html';
      },
  })
  

• Solution 2 based on biofractal's (there is no way to update a parent templateUrl using this method):

  .state('contact', {
      url: "/contact/:folder/:view"
  })
  
  $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
      var customStates = ["contact"]
      for (var i = 0; i < customStates.length; i++) {
          if (toState.name.indexOf(customStates[i]) != -1) {
              toState.templateUrl = 'views/' + toParams.folder + '/' + toParams.view + '.html';
              break;
          }
      }
  });
  

Answer 3

You can access to state params in the $stateChangeStart event. You can also dynamically update the templateUrl there as well.

So perhaps your code might look something like this:

angular.module('app', ['ui.router'])
.run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
        if (toState.name === 'list') {
          toState.templateUrl = 'views/'+toParams.somevalue+'/page.html';
        }
    });
}

You might also want to take a look at the onEnter callback supported by ui.router. I have not used this before but it might be neater than putting your template generating code into the $stateChangeStart event.