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.
-
Suggesting you to read ui-router documentation on templates github.com/angular-ui/ui-router/wiki#templates :)Henrik Peinar– Henrik Peinar2015-11-24 12:56:26 +00:00Commented Nov 24, 2015 at 12:56
Add a comment
|
5 Answers
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
Comments
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.
Comments
as templateUrl can also be a function you could easily do:
$stateProvider.state('home', {
templateUrl: function ($stateParams){
$http....success({
return <whatever> + '.html';
})
}
})
Comments
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);
});
},
}
});
Comments
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;
});
},
Comments
