如何从多个 html 模板中创建一个 html 页面或 templateUrl答案

【问题标题】：How to create an html page or templateUrl out of multiple html templates如何从多个 html 模板中创建一个 html 页面或 templateUrl
【发布时间】：2015-11-12 03:43:45
【问题描述】：

我是 angularjs 的新手，我已经在我的计算机上本地运行了一个简单的 web 应用程序。我在main.js 应用程序文件中有以下代码：

var webApp = angular.module('webApp', ['ngRoute']); 
webApp.config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) 
        {
            $routeProvider. 
            when('/', {
                    templateUrl : '/app/pages/home.phtml',
                    controller  : 'mainController'
            }).
            when('/signin', {
                    templateUrl : '/app/pages/signin.phtml',
                    controller  : 'signinController'
            }).
            when('/forgot', {
                    templateUrl : 'app/pages/forgot.phtml',
                    controller  : 'forgotController'
            }).
            when('/signup', {
                    templateUrl : 'app/pages/home.phtml',
                    controller  : 'signupController'
            });
            $locationProvider.html5Mode(true);
    }]);

我想知道对于这种特定情况，angularjs 的正确方法是什么：假设我想从多个 html 文件（或存储在文件中的 html 元素）中创建 home.phtml，换句话说，我想将 html 页面分解为多个 html 文件（模板），以便我可以合并/必要时单独组合每个元素。

如何在 angularjs 中做到这一点？
以这种方式创建 html 页面是否是一种好习惯（性能）？
如何缓存元素？
是动态的还是静态的？如果是这样，我怎样才能动态创建一个 templateUrl 并使用它？我已经阅读了一些文章，但我无法真正解决这个问题，因为我没有 angularjs 的全球知识。

【问题讨论】：

标签： angularjs

【解决方案1】：

你可以使用docs中的ng-include

作为一个元素：

<ng-include
  src="string"
  [onload="string"]
  [autoscroll="string"]>
  ...
</ng-include>

或在任何其他元素内：

<ANY
  ng-include="string"
  [onload="string"]
  [autoscroll="string"]>
  ...
</ANY>

或作为一个类：

<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>

基本上，在要包含其他模板的 html 文件中，只需添加 <ng-include src="yourtemplate.html"></ng-include>

【讨论】：