load template url from $http request in state routing

Question

I want to load templateurl from $http call.

$stateProvider
.state('home', {
        url: '/',
        templateUrl: will be served by $http call from server
    });

Please suggest how i will implement this.

Answer 1

I would suggest to use the templateProvider. That could consume any amount of IoC params (including current $stateParams). Combined with $templateRequest, we also can easily get template from server and keep it cached:

.state('myState', 
{
    ...
    // instead of templateUrl
    templateProvider: ['$templateRequest', '$stateParams', 
    function($templateRequest,$stateParams){
      var pathToTemplate = '....html';
      // get the proper path from any IoC injected here

      return $templateRequest(pathToTemplate);

    }],

Check these:

• Angular UI-router and using dynamic templates
• Angular UI Router: decide child state template on the basis of parent resolved object
• Using templateRequest in angular + typescript ($templateRequest not a function)
• ui router nested views condtions
• UI-Router, how to get the name of the 'state' And How send it to the function That brings Template state

Answer 2

Angular has done it it in most elegant way .If you want to call your backend controller to request a jsp page for templateurl just call $http url like this

.state('inbox', {
        url: '/inbox',
        templateUrl:'jspController/inboxRecord',
        controller : 'inboxController'
    }) 

that url respond with jsp page in my case inboxrecord.jsp that will be rendered.

Answer 3

as templateUrl can also be a function you could easily do:

$stateProvider.state('home', {
  templateUrl: function ($stateParams){
    $http....success({
      return <whatever> + '.html';
    })
  }
})

Answer 4

You will need a controller to populate your template from the results, and bind scope values from your template.

 $stateProvider
.state('home', {
    url: '/',
    templateUrl: 'index.html',
    resolve {
        results:  function($http){
        return $http({method: 'GET', url: '/serverspi'})
           .then (function (data) {
               return process(data);
           });
     },   
   }
});

Answer 5

I used templateProvider (https://github.com/angular-ui/ui-router/wiki) and retrieved a JSON object that contained my template doing something like this:

templateProvider: function($http) {
        return $http.get("http://example.com/returnJSONobject")
                .then(function(res) {
                    return res.htmlTemplate;
                });
},