Question

我使用角度路由：

angular.module("app-test", ["ngRoute"]).config(function ($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $routeProvider.when("/",
        {
            controller: "firstController",
            templateUrl: "/views/first/index.html"
        });

    $routeProvider.when("/second",
        {
            controller: "secondController",
            templateUrl: "/views/second/index.html"
        });

    $routeProvider.otherwise({ redirectTo: "/" });
});

但我对不同路线的所有看法（例如 views / first / index.html，views / second / index.html 等）都有重复的HTML代码，例如加载面板，消息等。我如何外包这些常见语法，例如布局html页，它与一起用于角度路由的所有templateUrl 视图？< / p>

例如，如果每个templateUrl都有以下html代码 - <div>{{message}}</div> - 我想将此代码放在一个额外的html文件中，当角度路由获取视图时，该文件将包含在templateUrl中。

Answer 1

您可以使用ng-include。但是你也可以使用不同控制器的相同View（html）：

        $routeProvider.when("/",
        {
            controller: "firstController",
            templateUrl: "/views/shared.html"
        });

    $routeProvider.when("/second",
        {
            controller: "secondController",
            templateUrl: "/views/shared.html"
        });

另请注意，“views”文件夹无法很好地扩展。最好为每个功能创建一个功能目录，其中包含构建该功能所需的所有部分。共享的东西可能会有点冒险 - 如果你事先知道你要分享它，你可以将它放在“共享”或“共同”目录中，但有时你最终会使用它来自它的功能第一次使用。

如何为角度路由创建布局模板？

1 个答案: