I am facing some confusion regarding routing in AngularJS.
Normally, we can configure routes in angular.config() when the angular module is loaded. At that time, we define static information such as routePath, templateUrl, and controller.
However, I am unsure about how to dynamically configure routes with changing templateUrl and controller based on certain conditions.
For instance, I have a list of features (links) that should be displayed after the user logs in, depending on their assigned role.
The list of userfeatures looks like this: [{name:menu1, link:link1,...}, {name:menu2, link:link2,...}, {name:menu3, link:link3,...}...]
These features need to be loaded when the page is initially loaded, which is done through the controller at that time.
So, my question is - is it possible to dynamically configure route links? And how can I determine the correct templateUrl and controller when a link is clicked?
Here's what I have tried so far (code snippet):
<body ng-app="myApp">
<div ng-controller="c1" directive-to-show-menus-and-its-showing></div>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
var $routeProvider1;
app.config(function($routeProvider) {
$routeProvider1 = $routeProvider;
});
app.controller('c1', function($http, $route, $rootScope){
//var ar = {"/":"main.htm","/red":"red.htm","/green":"green.htm","/blue":"blue.htm"};
var userfeatures = [{name: Red, link: red}, {name: Green, link: green}, {name: Blue, link: blue}]; //actually its huge
for(var i in userfeatures) {
$routeProvider1.when("#!" + userfeatures[i].link,{
'templateUrl': 'it should be dynamic', //(how to attach templateUrl in controller of its)
'controller': common_controller //it would be good with dynamic controller
});
}
});
function common_controller(){
// how to get clicked link info to extract certain info.
}
</script>