AngularJS routeProvider从数组生成路由

AngularJS routeProvider generate routes from array

本文关键字：路由数组 routeProvider AngularJS 更新时间：2023-09-26

我正在尝试为$routeProvider进行路由解析，以便从数组中生成.when（）。以下是我尝试过的app.js中的代码。这会生成正确的路由，但会导致"尝试多次加载AngularJS"的无限循环。我只在索引中加载angularjs。html文件，视图将呈现到该文件中。如何获取从阵列到工作的路由？阵列结构为"route":"fileName.html"。

var dynape = angular.module("dynape",['ngRoute','dynape.controllers','dynape.services','ngCookies']);
dynape.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
    var db = new PouchDB('http://localhost:5984/siteconf', {skipSetup: true});
    db.get("pages").then(function(doc) {
        var tmp = doc;
        delete tmp["_id"];
        delete tmp["_rev"];
        delete tmp["/"];
        for(p in tmp) {
            console.log(p.toString());
            $routeProvider.when(p.toString(), {
                controller: "SiteController",
                templateUrl: "views/pages/"+tmp[p]
            });
        }
    });
    // Follwing routes never change
    $routeProvider.when("/",{
        controller: 'SiteController',
        templateUrl: "views/frontPage.html"
    }).when("/admin",{
        controller: 'AdminLoginController',
        templateUrl: "views/admin/login.html"
    }).when("/admin/setup", {
        controller: 'SetupController',
        templateUrl: "views/admin/setup.html"
    }).when("/admin/dashboard", {
        controller: 'AdminActionController',
        templateUrl: "views/admin/dashboard.html"
    }).when("/admin/pages", {
        controller: 'AdminActionController',
        templateUrl: "views/admin/pages.html"
    }).otherwise({
        redirectTo: "/"
    });


    $locationProvider.html5Mode(true);
}
]);
angular.module("dynape.controllers",[]);
angular.module("dynape.services",[]);

我将视图渲染到的index.html：

<!DOCTYPE html>
<html ng-app="dynape">
<head>
    <base href="/">
    <meta charset="utf-8">
    <title>A Dynape Site</title>
    <link rel="stylesheet" href="/css/base.css" media="screen">
    <link rel="stylesheet" href="/css/components-base.css" media="screen">
    <link rel="stylesheet" href="/css/gridsys.css" media="screen">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
    <div class="wrap" ng-view>
    </div>
    <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
    <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
    <script type="text/javascript" src="src/vendor/jquery.js"></script>
    <script type="text/javascript" src="src/vendor/pouchdb.min.js"></script>
    <script type="text/javascript" src="src/vendor/image-picker.min.js"> </script>
    <script type="text/javascript" src="src/vendor/angular.min.js"></script>
    <script type="text/javascript" src="src/vendor/angular.route.min.js"></script>
    <script type="text/javascript" src="src/vendor/angular-cookies.js"></script>
    <script type="text/javascript" src="src/app.js"></script>
    <script type="text/javascript" src="src/services/AuthenticationService.js"></script>
    <script type="text/javascript" src="src/controllers/AdminLoginController.js"></script>
    <script type="text/javascript" src="src/controllers/AdminActionController.js"></script>
    <script type="text/javascript" src="src/controllers/SetupController.js"></script>
    <script type="text/javascript" src="src/controllers/SiteController.js"></script>

</body>
</html>

您不能在.config之外访问$routeProvider

我的猜测是db.get是对运行异步的服务器的调用。然后，当调用返回时，routeProvider已经注册。

换句话说，您的代码按以下顺序执行：

创建应用程序（groovy）
使用$routeProvider调用CONFIG（swell）
调用db.get（<callback>）（精细）
手动设置$routeProvider.when与6个特定路线（真棒）

现在，angularJs已经被引导。。。

db.get从服务器返回并调用<回拨>（啊哦）
尝试使用新的"动态"路由访问/更改$routeProvider（oops）

2个潜在解决方案：

A。bootstrap/config angularJs在db.get（）返回之后。从未尝试过。。。我想这是可行的，但似乎有风险。

B。使用装饰器的DEFER路由配置。有一篇关于这个主题的优秀博客文章，它似乎做了你想做的事。

这意味着所有的动态路由都需要相同的"根"（例如，它们都遵循"/other/：route*"格式），但这是唯一的限制。

我会选择B选项。看起来是个不错的计划！