A new and innovative feature has been introduced with the latest version 1.1.2 of AngularJS. Although it is still in the experimental stage, I have personally tested it on version 1.1.3 and found it to work perfectly.

This feature allows you to dynamically generate a templateUrl string using a function. The function receives route parameters as input which can be used to construct and return the desired templateUrl string.

var app = angular.module('app', []);

app.config(
    function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: '/home'}).
            when('/users/:user_id', 
                {   
                    controller: UserView, 
                    templateUrl: function(params){ return '/users/view/' + params.user_id; }
                }
            ).
            otherwise({redirectTo: '/'});
    }
);

I extend my gratitude to https://github.com/lrlopez for submitting the pull request.

For more details, visit https://github.com/angular/angular.js/pull/1524

By using the templateUrl property as a function, we are able to dynamically generate URLs based on certain arguments, such as routeParams. This allows us to manipulate the URL structure efficiently.

Take a look at this example:

.when('/:screenName/list',{
    templateUrl: function(params){
         return params.screenName +'/listUI'
    }
})

I trust that this explanation has been beneficial.

Alright, I think I finally figured it out...

Let me give you a little background first: I needed to integrate Angular with Node Express and use Jade to process my partials.

Here's what you need to do... (first, drink some beer and spend more than 20 hours on it!!!)...

When setting up your module, make sure to save the $routeProvider globally:

// app.js:
var routeProvider
    , app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){

        routeProvider = $routeProvider;
        $routeProvider
            .when('/', {templateUrl: '/login', controller: 'AppCtrl'})
            // More route configurations here
        .otherwise({redirectTo: '/login'});

});

// ctrls.js
...
app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){

    var idParam = $routeParams.id;
    routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'});
    $location.path('/tasks/' + idParam + '/edit/');

});
...

That might be more information than necessary...

• Essentially, store your Module's $routeProvider variable globally as routeProvider so that Controllers can access it.

• Then simply use routeProvider to create a NEW route (you cannot 'RESET a route' or 'REpromise'; you must create a new one), adding a slash (/) at the end for semantic consistency.

• In the Controller, set the templateUrl to the desired view.

• Avoid including the controller property in the .when() object to prevent an infinite request loop.

• Finally (still in the Controller), use $location.path() to redirect to the newly created route.

If you're curious about integrating an Angular app with an Express app, feel free to clone my repository here: https://github.com/cScarlson/isomorph.

This approach also allows you to maintain AngularJS Bidirectional Data-Bindings if you intend to bind your HTML to your database using WebSockets; otherwise, without this method, Angular data-bindings will just display {{model.param}}.

If you decide to clone it now, ensure you have mongoDB installed on your machine to run it.

I hope this resolves your issue!

Cody

And remember, don't drink your bathwater.

Router:-

...
.when('/enquiry/:page', {
    template: '<div ng-include src="templateUrl" onload="onLoad()"></div>',
    controller: 'enquiryCtrl'
})
...

Controller:-

...
// handling template onload event
$scope.onLoad = function() {
    console.log('Executing onLoad()');
    f_tcalInit();  // performing onload operations
}

// setting templateUrl for the route
$scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page;
...

I find it frustrating that $routeParams is inaccessible within the router in AngularJS. A small improvement could greatly improve implementation efficiency.

After making some modifications to angular, I have incorporated support for a new feature. This enhancement allows users to define

$routeProvider
    .when('/:some/:param/:filled/:url', {
          templateUrl:'/:some/:param/:filled/template.ng.html'
     });

https://github.com/unique-user/angular.js/commit/abcdef1234567890

I am uncertain if this alteration will be accepted since it deviates from the usual approach in angular. Nonetheless, it proves beneficial in my context.

//angular module with dependency on ngRoute  
 var app=angular.module("myApp",['ngRoute']);
    //Setting up routes for a Single Page Application
    app.config(function($routeProvider,$locationProvider){
          $locationProvider.hashPrefix('');
          $routeProvider
            .when('/',{template:'HOME'})
            .when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
            .otherwise({template:'Not Found'});
    }
   //Controller for handling about us page 
    app.controller('aboutCtrl',function($routeParams){
          $scope.paramOnePrint=$routeParams.paramOne;
          $scope.paramTwoPrint=$routeParams.paramTwo;
    });

in index.html

<a ng-href="#/about/firstParam/secondParam">About</a>

You can replace firstParam and secondParam with anything you want.

I encountered a similar problem and decided to utilize $stateParams in place of routeParam