Summer Developer Summer Developer - 5 months ago 99
AngularJS Question

Angular Ui-Router TemplateProvider Never Called Despite Returning A Promise

This question is similar to this: Angular ui-router templateProvider never called except in my case I am returning a promise and it still isn't working. The xhr request is never fired.

app.config(function($stateProvider, $urlRouterProvider){

// For any unmatched url, send to /content
$urlRouterProvider.otherwise("/content")

$stateProvider.state('map1', {
url: "/content/sectionI",
templateProvider: function($http, $stateParams) {
return $http({
method: 'GET',
url: '/contentMore',
params: {request:"Section_I_Unlocked",part:"map"}
}).then(function successCallback (html){
return html.data;
});
}
});

});


What am I doing wrong? I see the url change when I click on state
map1
but the templateProvider never fires?

Answer

There is a working plunker

I adjusted a bit the url path (but mostly for plunker purposes, not sure how your server is configured), and the concept as is is working:

  $stateProvider.state('map1', {
    url: "/content/sectionI",
    templateProvider: function($http, $stateParams) {
      return $http({
        method: 'GET',
        url: 'contentMore.html',
        params: {
          request: "Section_I_Unlocked",
          part: "map"
        }
      }).then(function successCallback(html) {
        return html.data;
      });
    }
  });

Check it in action here

There are even more easy ways how to load data.. e.g. with combination templateProvider and $templateRequest:

Using templateRequest in angular + typescript ($templateRequest not a function)

Angular ui.router reload parent templateProvider

Comments