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

Question

我使用angular路由：

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 页面 一起使用 angular 路由的 templateUrl 视图?

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

Answer 1

您可以使用 ng-include。但是您也可以将相同的视图 (html) 与不同的控制器一起使用：

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

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

另请注意，"views" 文件夹不能很好地缩放。每个功能都有一个功能目录，其中包含构建该功能所需的所有部分，这样效果会更好。共享的东西可能有点冒险——如果你事先知道你要共享它，你可以把它放在 "shared" 或 "common" 目录中，但有时你最终会从首次使用的功能。

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

How to create a layout template for angular routing?

html

javascript

angularjs

ngroute