Saturday, March 4, 2017

AngularJS Dynamic Routing


Here I will explain how to use single Route to load partial views dynamically based on Menu links.

The implementation idea for dynamic routing came from:
  2. My previous Blog post: 
  3. and some research. 
We know that client side code is accessible to end users.
Our application is a SPA, created using AngularJS and it has roles based authorization.
You don't want to show all AngularJS Route mappings defined in your application to all role users, since a low role user/hacker (customer) may try to access views defined for high role users (Admin).
Eventhough we may have setup authorization security for operations at server side, hiding Route mappings at client side provides a first level of security.

Our application renders specific Menu links based on authenticated user role, it has only single route mapping (wildcard) to handle all partial view links with dynamic controller. This controller handles registering new route, loading template and controller dynamically based on Menu link clicked.
Since controllers are also loaded dynamically, other role users can't access the controller logic intended for particular role.
To make this approach work, our Menu links point to the single wildcard route which is then converted to actual route by the dynamic controller.

Menu Links:
<div ng-controller="home">
 <h3>Home page</h3>
 <a href="" ng-click="go('/app/view-one')">second view1</a>
 <a href="" ng-click="go('/app/view2')">second view2</a>
 <a href="Default.html#/app/view3">second view3</a>
 <hr />
 <div ng-view></div>

Single Rout Map:
var app = angular.module("app", ['ngRoute']);
app.config(function ($routeProvider, $controllerProvider) {
 .when('/app/:name*', { template: '<div ng-init="load()">Loading...</div>', 
             controller: DynamicController })
  redirectTo: '/'
 app.register =
  controller: $controllerProvider.register,
  router: $routeProvider,
  loader: new RouteProvider()

Dynamic Controller:
function DynamicController($scope, $routeParams, $route, $location) {
 var name = $;
 if ($route.routes['/' + name] == null)
  app.register.router.when('/' + name, app.register.loader.resolve(name));
 $scope.load = function () {
  $location.path('/' + name);

From above code, you can see all link paths start with "/app/viewName" which are then converted to "/viewName".
Note that viewName is also used as file name for template and controller files, if you want you can modify the code to follow your naming convention for those files.

$routeProvider is leaked into global scope.

Download Link:
For full code, download from here.


  1. Some truly interesting information.

  2. Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

    Installment loans
    Payday loans
    Title loans
    Cash Advances

  3. Interesting blog which attracted me more.Spend a worthful time.keep updating more.
    MSBI Training in Chennai

  4. very very amazing explaintion....many things gather about yourself...yes realy i enjoy it
    SEO Company in India

  5. very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information about the web design and web development.Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.
    Hire Angularjs Developer