AngularJS routeProvider generate routes from array

Question

I'm trying to get route parsing for $routeProvider to generate .when()'s from array. Here is the code in app.js that I've tried. This generates correct routes, but causes infinite loops of "Tried to load AngularJS more than once". I only load angularjs in the index. html file, into which the view is rendered. How can I get routes from array to work? Array structure is "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:

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

You can't access $routeProvider outside of .config

My guess would be that db.get is a call to your server which runs async. Then, by the time that call comes back, the routeProvider is already registered.

In other words, your code is being executed in the following order:

Create app (groovy)
Call CONFIG with $routeProvider (swell)
Call db.get(<callback>) (fine)
Manually setup $routeProvider.when with 6 specific routes (awesome)

.... Now, angularJs has been bootstrapped ...

db.get returns from the server and calls <callback> (uh-oh)
Attempting to access/change $routeProvider with new 'dynamic' routes (oops)

2 Potential Solutions:

A. bootstrap/config angularJs AFTER the db.get() returns. Never tried this ... I guess it could work, but seems risky.

B. DEFER route configuration using a decorator. 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.

I'd go with option B. Seems like a good plan!

AngularJS routeProvider generate routes from array

Question

1 answers

solution1
0 ACCPTED 2016-01-14 18:02:14

You can't access $routeProvider outside of .config

AngularJS routeProvider generate routes from array

Question

1 answers

solution1 0 ACCPTED 2016-01-14 18:02:14

You can't access $routeProvider outside of .config

solution1
0 ACCPTED 2016-01-14 18:02:14