如何在angularjs中配置动态链接路由

I have some confusion in routing.

我在路由方面有些困惑。

We can config route in angular.config() while angular module is loaded.

我们可以在加载角度模块时在angular.config（）中配置路由。

That time we know how many to route means static(routePath, templateUrl,controller etc.).

那个时候我们知道有多少路由意味着静态（routePath，templateUrl，controller等）。

But how to config the routes-templateurl-controller dynamically.For example:

但是如何动态配置routes-templateurl-controller。例如：

I have certain list of features(nothing but links) which will come after user is logged in and based on the role assigned to it .

我有一些功能列表（只有链接），这些功能将在用户登录后根据分配给它的角色出现。

userfeatures=[{name:menu1,link:link1,...},{name:menu1,link:link1,...},{name:menu1,link:link1,...}...]

userfeatures = [{名称：MENU1，链接：LINK1，...}，{名称：MENU1，链接：LINK1，...}，{名称：MENU1，链接：LINK1，...} ...]

the above feature will come while the page will load for the first time( I am getting from controller which is called this time.)

页面第一次加载时会出现上述功能（我是从这次调用的控制器获取的。）

Can we configure the route link dynamically?

我们可以动态配置路由链接吗？

How to get templateUrl when the link is clicked ,controller is processing and get the corresponding page?

如何在单击链接时获取templateUrl，控制器正在处理并获取相应的页面？

What I tried(Actuallt its huge so only hint):

我尝试了什么（Actuallt它的巨大所以只提示）：

<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>

1 个解决方案

#1

Better to have your code segmented to 3 segments:

最好将代码分段为3个段：

1- Your application file (example: application.js)

1-您的应用程序文件（例如：application.js）

2- Your routing file (example: Routing.js)

2-您的路由文件（例如：Routing.js）

3- Your Url records (Url.json)

3-您的Url记录（Url.json）

I will assume you have already configured your main controller and ready for the action.

我假设您已经配置了主控制器并准备好采取行动。

Here a snap of how should your (Url.json) should look like:

在这里你应该如何看待你的（Url.json）：

{
"links" : [
{
    "Url": "/page/page1.html",
    "Controller": "Controller1"
},
{
    "Url": "/page/page2.html",
    "Controller": "Controller2"
}
]}

In your (Routing.js) file you should map the routes with the template files. You have to retrieve the data first from the json file through http request.

在您的（Routing.js）文件中，您应该使用模板文件映射路由。您必须首先通过http请求从json文件中检索数据。

  Myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
        function ($stateProvider, $urlRouterProvider, $locationProvider) {
        });
Myapp.run(['$route', '$http', '$rootScope', function ($route, $http, $rootScope) {
    var url = 'mydirectory/Url.json';
    httpRequest.get(url).then(function (response) {

        if (response.statusCode == 200) {

            var result = data.links;

            for (i = 0; i < result.length; i++) {
                $urlRouterProvider.when("/", {
                    templateUrl: result[i].Url
                });
            }
            $route.reload();
        }
    }, function () {
        console.log(Error!);
    });

}]);

In your (application.js) file you can rewrite the code of common_controller() and call it to update the json file (Url.json) based on your new dynamic link.

在你的（application.js）文件中，你可以重写common_controller（）的代码并调用它来根据你的新动态链接更新json文件（Url.json）。

#1