AngularJS routeProvider從數組生成路由

Question

我正在嘗試為$routeProvider進行路由解析，以從數組生成$routeProvider （）。 這是我嘗試過的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>

Answer 1

您無法在.config之外訪問$ routeProvider

我的猜測是db.get是對運行異步的服務器的調用。 然后，在調用返回時，routeProvider已經注冊。

換句話說，您的代碼按以下順序執行：

創建應用程序（常規）
用$ routeProvider調用CONFIG（膨脹）
調用db.get（<callback>）（精細）
手動設置$ routeProvider.when和6條特定路線時（很棒）

....現在，angularJs已被引導...

db.get從服務器返回並調用<callback>（uh-oh）
嘗試使用新的“動態”路由（哎呀）訪問/更改$ routeProvider

2種潛在解決方案：

A. bootstrap / config angularJs在db.get（）返回之后。 從未嘗試過...我想它可能會起作用，但似乎有風險。

B.使用裝飾器延遲路由配置。 關於此主題的一篇出色的博客文章似乎可以完成您想做的事情。

這意味着所有動態路由都需要相同的“根”（例如-它們都遵循“ / other /：route *”格式），但這是唯一的限制。

我會選擇選項B。似乎是個好計划！

AngularJS routeProvider從數組生成路由

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-14 18:02:14

您無法在.config之外訪問$ routeProvider

AngularJS routeProvider從數組生成路由

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-14 18:02:14

您無法在.config之外訪問$ routeProvider

解決方案1
0 已采納 2016-01-14 18:02:14