AngularJs 在回调里面配置路由 app.config

AngularJs configure route in callback inside app.config

我正在开发一个应用程序,我需要路由必须加载动态模板,例如:

当我点击 /myclient/#!/details 时,我需要从 "myclient" 目录加载模板。

我有一个 json API 可以为每个客户端响应此配置。

[{
    "path": "/",
    "templateUrl": "template/loja1/index.html",
    "controller": "homeController"
}, {
    "path": "/detail",
    "templateUrl": "template/loja1/detail.html",
    "controller": "homeController"
}];

因此,我在尝试将 angular.config 设置为此 API 响应的回调时遇到问题。我也尝试在回调后设置路由。

我认为这个解决方案很合适。我做错了什么?

var app = angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider, $locationProvider, $provide) {

    $locationProvider.hashPrefix('!');

    var API = $provide.factory('API', function($http) {
        return {
            getStore: function() {
                return $http.get("http://localhost:8080/resources/route");
            }
        };
    });

    var runRote = function(routes) {

        routes.forEach(function(route) {
            $routeProvider.when(route.path, {
                templateUrl: route.templateUrl,
                controller: route.controller
            });
        });
        $routeProvider.otherwise({
            redirectTo: "templates/404.html"
        });
    };

    var getRoutes = function(runRote) {
        API.$get().getStore().success(function(data, status) {
            runRote(JSON.stringify(data));
        }).error(function(data, status) {
            runRote();
        });
    };

    getRoutes(runRote);

});

将路由数组传递给 runRote 函数时,您不必将其字符串化。在其中,您对传递的数据使用 forEach 方法,这是一种数组方法,而不是字符串。正确的代码应该是:

var getRoutes = function(runRote) {
    API.$get().getStore().success(function(data, status) {
        runRote(data);
    }).error(function(data, status) {
        runRote();
    });
};

另外路由的配置应该是

redirectTo: "templates/404.html"

德里卡!

使用@dfsq 发送的这个实现,它会工作,但是这部分

app.controller('homeController', function($route) {
    window.route = $route;
});
如果您使用 ui-route,则

不是必需的。 否则,这个问题在 / 路由中,您可以使用 localStorage 保存您的 json 信息并重新加载页面。在我的测试中,它起作用了。