Question

我在路由方面有些困惑。

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

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

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

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

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

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

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

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

我尝试了什么（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>

Answer 1

最好将您的代码细分为3个细分：

1-您的申请文件（例如：application.js）

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

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

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

这里有一个关于你的（Url.json）应该是什么样子的图片：

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

在您的（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!);
    });

}]);

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

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

1 个答案: