feat(route): Allow using functions as template params in 'when'

Author: lrlopez

src/ng/route.js

@@ -35,12 +35,24 @@ function $RouteProvider(){
    *    - `controller` – `{(string|function()=}` – Controller fn that should be associated with newly
    *      created scope or the name of a {@link angular.Module#controller registered controller}
    *      if passed as a string.
-   *    - `template` – `{string=}` –  html template as a string that should be used by
-   *      {@link ng.directive:ngView ngView} or
+   *    - `template` – `{string=|function()=}` – html template as a string or function that returns
+   *      an html template as a string which should be used by {@link ng.directive:ngView ngView} or
    *      {@link ng.directive:ngInclude ngInclude} directives.
-   *      this property takes precedence over `templateUrl`.
-   *    - `templateUrl` – `{string=}` – path to an html template that should be used by
-   *      {@link ng.directive:ngView ngView}.
+   *      This property takes precedence over `templateUrl`.
+   *
+   *      If `template` is a function, it will be called with the following parameters:
+   *
+   *      - `{Array.<Object>}` - route parameters extracted from the current
+   *        `$location.path()` by applying the current route
+   *
+   *    - `templateUrl` – `{string=|function()=}` – path or function that returns a path to an html
+   *      template that should be used by {@link ng.directive:ngView ngView}.
+   *
+   *      If `templateUrl` is a function, it will be called with the following parameters:
+   *
+   *      - `{Array.<Object>}` - route parameters extracted from the current
+   *        `$location.path()` by applying the current route
+   *
    *    - `resolve` - `{Object.<string, function>=}` - An optional map of dependencies which should
    *      be injected into the controller. If any of these dependencies are promises, they will be
    *      resolved and converted to a value before the controller is instantiated and the
@@ -395,9 +407,18 @@ function $RouteProvider(){
                 values.push(isString(value) ? $injector.get(value) : $injector.invoke(value));
               });
               if (isDefined(template = next.template)) {
+                if (isFunction(template)) {
+                  template = template(next.params);
+                }
               } else if (isDefined(template = next.templateUrl)) {
-                template = $http.get(template, {cache: $templateCache}).
-                    then(function(response) { return response.data; });
+                if (isFunction(template)) {
+                  template = template(next.params);
+                }
+                if (isDefined(template)) {
+                  next.loadedTemplateUrl = template;
+                  template = $http.get(template, {cache: $templateCache}).
+                      then(function(response) { return response.data; });
+                }
               }
               if (isDefined(template)) {
                 keys.push('$template');

test/ng/routeSpec.js

@@ -715,6 +715,53 @@ describe('$route', function() {
     });
 
 
+    it('should allow using a function as a template', function() {
+      var customTemplateWatcher = jasmine.createSpy('customTemplateWatcher');
+
+      function customTemplateFn(routePathParams) {
+        customTemplateWatcher(routePathParams);
+        expect(routePathParams).toEqual({id: 'id3'});
+        return '<h1>' + routePathParams.id + '</h1>';
+      }
+
+      module(function($routeProvider){
+        $routeProvider.when('/bar/:id/:subid/:subsubid', {templateUrl: 'bar.html'});
+        $routeProvider.when('/foo/:id', {template: customTemplateFn});
+      });
+
+      inject(function($route, $location, $rootScope) {
+        $location.path('/foo/id3');
+        $rootScope.$digest();
+
+        expect(customTemplateWatcher).toHaveBeenCalledWith({id: 'id3'});
+      });
+    });
+
+
+    it('should allow using a function as a templateUrl', function() {
+      var customTemplateUrlWatcher = jasmine.createSpy('customTemplateUrlWatcher');
+
+      function customTemplateUrlFn(routePathParams) {
+        customTemplateUrlWatcher(routePathParams);
+        expect(routePathParams).toEqual({id: 'id3'});
+        return 'foo.html';
+      }
+
+      module(function($routeProvider){
+        $routeProvider.when('/bar/:id/:subid/:subsubid', {templateUrl: 'bar.html'});
+        $routeProvider.when('/foo/:id', {templateUrl: customTemplateUrlFn});
+      });
+
+      inject(function($route, $location, $rootScope) {
+        $location.path('/foo/id3');
+        $rootScope.$digest();
+
+        expect(customTemplateUrlWatcher).toHaveBeenCalledWith({id: 'id3'});
+        expect($route.current.loadedTemplateUrl).toEqual('foo.html');
+      });
+    });
+
+
     describe('reload', function() {
 
       it('should reload even if reloadOnSearch is false', function() {