Angular and UI-Router, how to set a dynamic templateUrl

Solution 1:

As discussed in this Q & A: Angular UI Router: decide child state template on the basis of parent resolved object, we can do that like this

This could be a service playing role of "from Server/DB loading template name":

.factory('GetName', ['$http', '$timeout',
    function($http, $timeout) {
      return {
        get : function(id) {
          // let's pretend server async delay
          return $timeout(function(){
            // super simplified switch... but ...
            var name = id == 1
                  ? "views.view2.html"
                  : "views.view2.second.html"
                  ;
            return {templateName : name}; 
          }, 500);
        },
      };
    }
]);

Then the templateProvider defintion would look like this:

  views: {
    "page": {
      templateProvider: function($http, $stateParams, GetName) {

        // async service to get template name from DB
        return GetName
            .get($stateParams.someSwitch)
            // now we have a name
            .then(function(obj){
               return $http
                  // let's ask for a template
                  .get(obj.templateName)
                  .then(function(tpl){
                      // haleluja... return template
                      return tpl.data;
               });      
            })

      }, 

The code should be self explanatory. Check this answer and its plunker for more details

Solution 2:

I created an example, which does use some json to be load as data from the server, check it here. This what the $http will recieve (in our simplifed examle)

// dataFromServer.json
{
  "1": "views.view2.html",
  "2": "views.view2.second.html"
}

So this will come via $http and we will use it to return the name

.factory('GetName', ['$http', '$timeout',
    function($http, $timeout) {
      return {
        get : function(id) {
          // let's get data via $http
          // here it is the list, but 
          // should be some GetById method
          return $http
            .get("dataFromServer.json")
            .then(function(response){

              // simplified converter
              // taking the $http result and 
              // by id gets the name
              var converter = response.data;
              var name = converter[id];

              return {templateName : name}; 
          });
        },
      };
}

As we can see, this time, we really go for server data, using $http the trick again is to return that promise

return $http // see the return
  .get....

and later, we return again... inside of the then

....
.then(function(response){
   ...
   return {templateName : name}; 
});

That Example is here