简体   繁体   English

AngularJS routeProvider从数组生成路由

[英]AngularJS routeProvider generate routes from array

I'm trying to get route parsing for $routeProvider to generate .when()'s from array. 我正在尝试为$routeProvider进行路由解析,以从数组生成$routeProvider ()。 Here is the code in app.js that I've tried. 这是我尝试过的app.js中的代码。 This generates correct routes, but causes infinite loops of "Tried to load AngularJS more than once". 这会生成正确的路由,但会导致“尝试多次加载AngularJS”的无限循环。 I only load angularjs in the index. 我只在索引中加载angularjs。 html file, into which the view is rendered. 呈现视图的html文件。 How can I get routes from array to work? 如何获得从阵列到工作的路由? Array structure is "route":"fileName.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",[]);

The index.html into which I render the view: 我将视图渲染到的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>

You can't access $routeProvider outside of .config 您无法在.config之外访问$ routeProvider

My guess would be that db.get is a call to your server which runs async. 我的猜测是db.get是对运行异步的服务器的调用。 Then, by the time that call comes back, the routeProvider is already registered. 然后,在调用返回时,routeProvider已经注册。

In other words, your code is being executed in the following order: 换句话说,您的代码按以下顺序执行:

  1. Create app (groovy) 创建应用程序(常规)
  2. Call CONFIG with $routeProvider (swell) 用$ routeProvider调用CONFIG(膨胀)
  3. Call db.get(<callback>) (fine) 调用db.get(<callback>)(精细)
  4. Manually setup $routeProvider.when with 6 specific routes (awesome) 手动设置$ routeProvider.when和6条特定路线时(很棒)

.... Now, angularJs has been bootstrapped ... ....现在,angularJs已被引导...

  1. db.get returns from the server and calls <callback> (uh-oh) db.get从服务器返回并调用<callback>(uh-oh)
  2. Attempting to access/change $routeProvider with new 'dynamic' routes (oops) 尝试使用新的“动态”路由(哎呀)访问/更改$ routeProvider

2 Potential Solutions: 2种潜在解决方案:

A. bootstrap/config angularJs AFTER the db.get() returns. A. bootstrap / config angularJs在db.get()返回之后。 Never tried this ... I guess it could work, but seems risky. 从未尝试过...我想它可能会起作用,但似乎有风险。

B. DEFER route configuration using a decorator. B.使用装饰器延迟路由配置。 there is an excellent blog post on this topic which seems to do what you want to do. 关于此主题的一篇出色的博客文章似乎可以完成您想做的事情。

It would mean that all your dynamic routes would need the same "root" (eg - they all follow the format "/other/:route*"), but that's the only restriction. 这意味着所有动态路由都需要相同的“根”(例如-它们都遵循“ / other /:route *”格式),但这是唯一的限制。

I'd go with option B. Seems like a good plan! 我会选择选项B。似乎是个好计划!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM