Angularjs Dynamic Routing

AngularJS dynamic routing

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
        config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/page/:name*', {
            templateUrl: function(urlattr){
                return '/pages/' + urlattr.name + '.html';
            },
            controller: 'CMSController'
        });
    }
]);

• Adding * let you work with multiple levels of directories dynamically.
  Example: /page/cars/selling/list will be catch on this provider

From the docs (1.3.0):

"If templateUrl is a function, it will be called with the following
parameters:

{Array.} - route parameters extracted from the current
$location.path() by applying the current route"

Also

when(path, route) : Method

• path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.

Does AngularJS have dynamic routing?

This is a late answer but I came across this problem myself, but it turns out that the solution by Dan conflicts with ngAnimate classes on the ngView directive, and the view is shown but the ng-leave animation will immediately be applied and hide the view opened with his dynamic routing.

I found the perfect solution here, and it's available in 1.1.5 +

In the $routeProvider, the templateUrl value can be a function, and is passed the route parameters:

app.config(function ($routeProvider) {
$routeProvider
    .when('/:page', {
         templateUrl: function(routeParams){
             return '/partials/'+routeParams.page+'.html';
        }
    })
});

Though the controller can't be given as a function so my solution is to give it in the template html as per usual with ng-controller="HomeCtrl".

Using this solution we can route by convention in Angular.
I hope this helps others who weren't keen on manually adding every route to the routeProvider.

ui.router dynamic routing in angularjs

I would assume that since your sidebar is dynamic that it's coming from some data source. You could configure that datasource to have all the info you need for your routes or go with convention. Something like:

angular.forEach(states, function(state) {
    $stateProvider.state(state, {
            url: '/' + state, 
            templateUrl: 'views/' + state + '.html',
            controller: state + 'Controller'
      }) ;
})

Dynamic Routing in AngularJS - Can I retrieve data from server before setting up $routeProvider?

There is no way to do this.

A provider is a configurable service creator. They allow us to provide an API to use to configure their creation. And the configurability is what brings us to config blocks. These are used before services are available in order to configure their creation. So you can pass settings to $routeProvider or $httpProvider that it will use when it creates the $route and $http services, respectively.

Because the services are still being configured at this stage, the services themselves are not available for injection - they don't actually exist yet.

The $routeProvider allows us to configure routes, which must be running when our application starts. It wouldn't make sense to have routing start at some random point during the running of our application.

All this is to say that you can't start running your application, which is what using $http would mean, until after the configuration is done. So there's no way to define routes from remote data.

---

For what it's worth, I don't think I see the value in such dynamic routes anyway; they would be unpredictable by nature because they are built from data that is not static. This would totally break bookmarkability, which is the principal purpose of routing.

So I would ask why you feel the need to do this in the first place and then take a step back and see if this is really even the way it should ideally be done.

Feel free to post a comment to provoke further discussion.

AngularJS dynamic routes and templates

You can access the dynamic values of route by $routeprovider.route. Try the below,

$routeProvider.when('/page/:route', {
          templateUrl: function($routeParams) { 
            return '/page/'+$routeParams.route+'.tpl.html'; 
          },
          controller: 'PageController'
        });

AngularJs dynamic template display with same route

There is a working example, which is close to this Q & A: Trying to Dynamically set a templateUrl in controller based on constant

In case I understand you properly, the way could be:

• use $stateParams for switching read / edit
• templateProvider to select template
• $templateRequest to profit from angular native wrapper over $http + $tempalteCache

The state def would be very simple:

$stateProvider
    .state('myState', {
        url: '/myState/:operation',

        templateProvider: ['$stateParams', '$templateRequest',
          function($stateParams, $templateRequest) {

            var templateName = 'read.html';

            if ($stateParams.operation === "edit") {
                 templateName = 'edit.html';
            } 

            return $templateRequest(templateName);
        }],
        controller: function ($state) {
        }
    });

And links to this state:

  <a href="#/myState/read">
  <a href="#/myState/edit">

Check the examle in action here

---

Related Topics