Angular pass parameters in templateurl in stateprovider

Question

I am using a $stateprovider as follows from angular-ui-router in my angular application:

.state('order', {
        url: "/order/:id",
        templateUrl: "/myapp/order"
    })

In the above scenario, we are passing an id to the controller and we can call it as ui-sref="order({id: 1234})".

But now i want to make a direct call to the backend by not using a controller and pass the above as follows:

.state('order', {
        url: "/order",
        templateUrl: "/myapp/order/:id"
    })

But obviously my syntax is wrong here. How do i achieve this scenario?

Perhaps take a look at templateProvider? I'm not sure what you mean by direct call to the backend. — Samir Alajmovic, Mar 04 '15 at 22:21
i have django on the backend that renders the partial template based on the url i am calling. The template is rendered if i make a call directly to the url. This url has a django view that renders the template. So i am trying to call this url in the stateprovider directly without using the controller — Abhishek, Mar 04 '15 at 22:25
Isn't templateProvider the way to go then, since you have access to the $stateParams, and you do a http request of your template with the id? — Samir Alajmovic, Mar 04 '15 at 22:32
can you help me with that? i am trying something like this: .state('order', { url: "/irms/order/:id", templateProvider: function ($http, orderService, $stateParams) { return orderService.getUrl($stateParams.id).then(function(url) { return $http.get(url); }) } }) — Abhishek, Mar 04 '15 at 22:50
Try? templateProvider: function($timeout, $stateParams, $http) { var url = '/myapp/order/' + $stateParams.id; return $timeout(function () { return $http.get(url).then(function(html){ return html.data; })}, 100); }] — Samir Alajmovic, Mar 04 '15 at 23:00
hi this worked great.... but it is not displaying the html though... When i checked the preview in the network, it shows the partial view correctly but it is not displaying it in the ui-view — Abhishek, Mar 04 '15 at 23:15

score 3 · Accepted Answer · edited May 23 '17 at 11:50

I created working example. It is adjsuting thiw Q & A:

Trying to Dynamically set a templateUrl in controller based on constant

Let's have templates template-A.html and template-B.html in our example. The state def with templateProvider would look like this

  $stateProvider
    .state('order', {
      url: '/order/:id',

      templateProvider: function($http, $templateCache, $stateParams) {

        var id = $stateParams.id || 'A';
        var templateName = 'template-' + id + '.html';

        var tpl = $templateCache.get(templateName);

        if (tpl) {
          return tpl;
        }

        return $http
          .get(templateName)
          .then(function(response) {
            tpl = response.data
            $templateCache.put(templateName, tpl);
            return tpl;
          });
      },
      controller: function($state) {}
    });

And now we can call it like this

  <a href="#/order/A">
  <a href="#/order/B">

Check it here

And what's more, with latest version of angularjs we can even make it super simple:

$templateRequest

Updated plunker

.state('order', {
  url: '/order/:id',

  templateProvider: function($templateRequest, $stateParams) {

    var id = $stateParams.id || 'A';
    var templateName = 'template-' + id + '.html';
    return $templateRequest(templateName);
  },
  controller: function($state) {}
});

Angular pass parameters in templateurl in stateprovider

1 Answers1

Trying to Dynamically set a templateUrl in controller based on constant

Linked