Question

我喜欢我的应用程序生成我的角度模板的路径，而不是在我的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，我无法从$scope内部访问app.config，我找不到办法从控制器内部添加路由。

我确实试过了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

不要在模板中使用ng-init渲染角度HTML（绑定到$ scope），而是让服务器呈现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应用程序中动态添加路线

1 个答案: