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