Angular pass parameters in templateurl in stateprovider - angularjs

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?

Answer 1

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) {}
});