angular dynamic templateUrl

Problem

Hi have one more question, I have next config for angular:

angular.module('ow', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:placeId', {templateUrl: 'partials/menu.html', controller: MenuCtrl}).
when('/menu/:itemId', {templateUrl: 'partials/menu-details.html', controller: MenuItemCtrl}).
when('/look/refill', {templateUrl: 'partials/refill.html', controller: RefillCtrl}).
when('/look/orderCart', {templateUrl: 'partials/orderCart.html', controller: OrderCartCtrl}).
when('/lang/:lang', {templateUrl: 'partials/menu.html', controller: LangCtrl}).
when('/waiter/:redirect', {templateUrl: "???????", controller: WaiterCtrl}).
otherwise({redirectTo: '/0'});
}];

Instead of “?????” I need to put dynamic url, tried to do it in controller like:

function WaiterCtrl($routeParams, $location, sharedData, $http, $route) {
$http.get(config.urls.ajaxWaiter + "{\"p\":\"" + sharedData.getOrderCart().orderPlace + "\"}").success(function(dataDetails) {
if ($routeParams.redirect == "menu") {
$route.templateUrl = "partials/menu.html";
$location.path("/");
}
if ($routeParams.redirect == "menuDetails") {
$route.templateUrl = "partials/menu-details.html";
$location.path("/menu/" + sharedData.getMenu());
}
if ($routeParams.redirect == "orderCart") {
$route.templateUrl = "partials/orderCart.html";
$location.path("/orderCart");
}
if ($routeParams.redirect == "refill") {
$route.templateUrl = "partials/refill.html";
$location.path("/refill");
}
return $route.templateUrl;
});

}

but it doesn’t work… Can you help me?

Problem courtesy of: Simcha

Solution

You won’t be able to put dynamic code into the routing. This is because the routing happens during the Config phase, which is executed before Angular starts running your application.

I think the easiest or cleanest way to do what you are trying to do is just have an inline controller in the route definition. I set up a simple plunk to show redirecting inside the route definition: http://plnkr.co/edit/aeSjmn?p=preview

Here’s some sample code that might work for you:

angular.module('ow', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:placeId', {templateUrl: 'partials/menu.html', controller: MenuCtrl}).
when('/menu/:itemId', {templateUrl: 'partials/menu-details.html', controller: MenuItemCtrl}).
when('/look/refill', {templateUrl: 'partials/refill.html', controller: RefillCtrl}).
when('/look/orderCart', {templateUrl: 'partials/orderCart.html', controller: OrderCartCtrl}).
when('/lang/:lang', {templateUrl: 'partials/menu.html', controller: LangCtrl}).
when('/waiter/:redirect', {template: '', controller: function ($scope, $routeParams, $location) {
function WaiterCtrl($routeParams, $location, sharedData, $http, $route) {
$http.get(config.urls.ajaxWaiter + "{\"p\":\"" + sharedData.getOrderCart().orderPlace + "\"}").success(function(dataDetails) {
if ($routeParams.redirect == "menu")
$location.path("/");
else
$location.path("/" + $routeParams.redirect);
})
}}).
otherwise({redirectTo: '/0'});
}];

Solution courtesy of: Jason Aden

View additional discussion.