AngularJS – How to use $routeParams in generating the templateUrl?

by

This very helpful feature is now available starting at version 1.1.2 of AngularJS. It’s considered unstable but I have used it (1.1.3) and it works fine.

Basically you can use a function to generate a templateUrl string. The function is passed the route parameters that you can use to build and return the templateUrl string.

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

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

Many thanks to https://github.com/lrlopez for the pull request.

https://github.com/angular/angular.js/pull/1524

More Related Contents:

  1. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  2. Clicking a button within a form causes page refresh
  3. How to dynamically change header based on AngularJS partial view?
  4. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  5. Caching a promise object in AngularJS service
  6. What’s the difference between returning value or Promise.resolve from then()
  7. Element not visible error (not able to click an element)
  8. jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL
  9. AngularJS dynamic routing
  10. I want to change the chart for each city or subcity selected
  11. Apply CSS style attribute dynamically in Angular JS
  12. Firebase TIMESTAMP to date and Time
  13. Angular js – route-ui add default parmeter
  14. Using require with relative paths
  15. Accessing $scope in AngularJS factory?
  16. How can I tell AngularJS to “refresh”
  17. Angular ui router unit testing (states to urls)
  18. What is the angularjs way to databind many inputs?
  19. Angular.js: set element height on page load
  20. $watch’ing for data changes in an Angular directive
  21. AngularJS: How do I manually set input to $valid in controller?
  22. Using jqgrid with popover from angular ui bootstrap
  23. how to change the headers for angularjs $http.jsonp
  24. How can I access the value of a promise?
  25. Open links in new window using AngularJS
  26. AngularJS ng-src inside of iframe
  27. Passing parameter inside $location.path in Angular
  28. Scope issues with Angular UI modal
  29. Run jQuery code after AngularJS completes rendering HTML
  30. Use underscore inside Angular controllers

Leave a Comment