在 AngularJS 应用程序中动态添加路由

Question

我希望我的应用生成 angular 模板的路径，而不是在我的 JS 文件中对它们的字符串路径进行硬编码。目前我让服务器创建一个包含我需要的所有信息的 JSON 对象。以下是呈现的 HTML 的显示方式：

<div ng-cloak ng-controller="BaseCtrl" ng-init="templatePaths = {
   "items":[
       {"token":"about","template":"http://localhost:32243/ViewTemplate/about.html"},
       {"token":"contact","template":"http://localhost:32243/ViewTemplate/contact.html"},
       {"token":"home","template":"http://localhost:32243/ViewTemplate/home.html"}
   ],"defaultTemplate":"http://localhost:32243/ViewTemplate/home.html"
 }">

之前我是这样定义我的路由的，但我更愿意使用上面的服务器生成的对象。

app.config([
    "$routeProvider",
    function ($routeProvider) {
        $routeProvider
          .when("/home", {
            templateUrl: "ViewTemplate/home.html"
        }).when("/contact", {
            templateUrl: "ViewTemplate/contact.html"
        }).when("/about", {
            templateUrl: "ViewTemplate/about.html"
        }).otherwise({
            redirectTo: '/home'
        });
    }
]);

我遇到的问题是，由于我所有关于我的路线的数据现在都在 $scope.templatePaths 上，我无法从 app.config 内部访问 $scope，而且我找不到从控制器内部添加到路由的方法。

我试过了this method，但是好像不行了。

//Wait until templatePaths is init in the view...
$scope.$watch("templatePaths", () => {
    _.each($scope.templatePaths.items, item => {
        $route.routes[item.token] = { templateUrl: item.template }
    });
});

Answer 1

不要在模板（绑定到 $scope）中使用 ng-init 渲染 angular HTML，而是让服务器渲染 javascript。类似于：

<script>
var MYAPP = MYAPP || {};

MYAPP.templatePaths = {
    items: [
        { token: "about", template: "http://localhost:32243/ViewTemplate/about.html" },
        { token: "contact", template: "http://localhost:32243/ViewTemplate/contact.html" },
        { token: "home", template: "http://localhost:32243/ViewTemplate/home.html" }
    ],
    defaultTemplate: "http://localhost:32243/ViewTemplate/home.html"
};
</script>

这应该在您的 app.js 个文件的包含之前呈现。

然后在你的 app.js 文件中，你可以使用 MYAPP 作为常量并将其注入你的配置（或其他需要的地方）：

//define as constant to be injectable.
app.constant("MYAPP", MYAPP);

app.config([
    "$routeProvider", "MYAPP",
    function ($routeProvider, MYAPP) {
        var templatePaths = MYAPP.templatePaths;
        var items = templatePaths.items;
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            $routeProvider.when("/" + item.token, {
                templateUrl: item.template
            });
        }

        $routeProvider.otherwise({
            redirectTo: templatePaths.defaultTemplate
        });
    }
]);

我在我的项目中使用了类似的模式，使服务器设置的变量在客户端代码中可用。

在 AngularJS 应用程序中动态添加路由

Dynamically adding routes in an AngularJS app

angularjs