Currently, I am in the process of developing an angular application utilizing angular-ui-router. The backend of the application consists of a REST api that provides a form URL based on a specific ticket id. My aim is to dynamically set the template in app.js by making a query to this REST service. Here is an example:
$stateProvider
.state('form', {
url: '/form/:id',
templateProvider: function ($resource, formResolver, $stateParams) {
// The formResolver function makes a call to the REST API using the form id and retrieves a URL.
return formResolver.resolve($stateParams.id).then(function(url) {
return $resource(url).get();
};
},
controller: 'MyCtrl'
});
The challenge I am encountering is that the function returns a promise while templateProvider requires a string content. My goal is to simply return the URL:
$stateProvider
.state('form', {
url: '/form/:id',
// I want to inject formResolver, however, it is not possible
templateUrl: function (stateParams, formResolver) {
return formResolver.resolve(stateParams.id);
},
controller: 'MyCtrl'
});
However, while using templateUrl instead of templateProvider as explained in https://github.com/angular-ui/ui-router/wiki#wiki-templates, I do not receive dependency injection and I am still faced with the issue of returning a promise. It seems like my only solution may be to avoid using the promise API altogether.