Angular-UI-Router - getting content of dynamic template

Question

I am building an angular app using angular-ui-router. The backend has a REST api that gives me the url to a form based on a ticket id. In app.js, I want to dynamically set the template based on a query to this REST service. Example: ``` $stateProvider .state('form', { url: '/form/:id', templateProvider: function ($resource, formResolver, $stateParams) { //formResolver calls the REST API with the form id and gets back a URL. return formResolver.resolve($stateParams.id).then(function(url) { return $resource(url).get(); }; }, controller: 'MyCtrl' }); ``` The problem is that I end up returning a promise and templateProvider requires a string of content. What I would like to do is just return the url: ``` $stateProvider .state('form', { url: '/form/:id', //I would like to inject formResolver, but I can't templateUrl: function (stateParams, formResolver) { return formResolver.resolve(stateParams.id); }, controller: 'MyCtrl' }); ``` But I don't get dependency injection when using templateUrl…

Accepted Answer

Turns out there was something wrong with the way I was using `$resource`. I'm still not sure what. From looking at the source for angular-ui-router, the function can return a promise. I ended up copying some of the code from https://github.com/angular-ui/ui-router/blob/master/src/templateFactory.js to get the following, which works:

```
    templateProvider: function ($http, formService, $stateParams) {
      return formService.getFormUrl($stateParams.id).then(function(url) {
        return $http.get(url);
      }).then(function(response) {
        return response.data;
      })
```

Angular-UI-Router - getting content of dynamic template

Solution

Problem