Dynamic Routes with AngularJS

There is a simple rule in AngularJS that trips up many people because they simply aren’t aware of the rule. The rule is that every module has two phases, a configuration phase and a run phase. During the configuration phase you can only use service providers and constants, but during the run phase you only have access to services, and not the service providers.

One scenario where the rule will trip people up is the scenario where an application needs flexible, dynamic routes. Perhaps the routes are tailored to a user’s roles, like giving additional routes to a superuser, but regardless of the specifics you probably need some information from the server to generate the routes. The typical approach to server communication is to use the $http service, so a first attempt might be to write a config function that uses $http and $routeProvider to put together information on the available routes.

One approach would be to use a different wrapper for service communication, like jQuery’s $.get, perhaps combined with manual bootstrapping of the Angular application to ensure you have everything from the server you need to get started.

An Solution With C# and Razor

Another approach would be to use server side rendering to embed the information you need into the shell page of the application. For example, let’s say you are using the following class definitions.

And Remember

You can’t effectively enforce security on the client, so views and API calls still need authorization on the server to make sure a malicious user hasn’t manipulated the routes.

Comments

Arun Mahendrakar
Monday, March 24, 2014

Thanks so much for this Scott.

Robert Koritnik
Tuesday, March 25, 2014

These look nice, but these can hardly be called dynamic routes, because from the ngApp perspective they are still static routes.They're just predefined on the server side and statically provided to client. True dynamic routes should be loaded on demand on the client and resolved there... Because you still have to preload all controllers handling ALL routes regardless of your security settings and route configuration. Some of those controllers may undisclose too much info to those that don't have permission...

Scott
Tuesday, March 25, 2014

@Robert: Sure, the routes aren't changing as the program executes, but they are generated based on the client's identity instead of hard coded. I always have to implement security on the server side to make sure APIs are only giving data to authorized users. If you also want to use the config to avoid loading all controllers there is a little more work to do, one example here: https://github.com/matys84pl/angularjs-requirejs-lazy-controllers

Mike George
Tuesday, March 25, 2014

This is genius and so simple! I've been struggling to implement route security solely in angular and this solution makes it incredibly easy. Thanks!

webdevelopmentcompanyinchennai
Wednesday, March 26, 2014

Wow Really very useful information.
Thanks a lot for sharing it with us. I will look forward to read more from you.
Could I share this information on my site.
http://webdesigningcompanyinchennai.in/”>Web Designing in Chennai.

Greg
Wednesday, March 26, 2014

How about my solution? Or maybe a combination of the two? If you add any HTML files to a specified directory they are automatically accessible via the URL as dynamic routes.
https://github.com/gregorypratt/AngularDynamicRouting