Angular 文件包含和分离 - 最佳实践答案

【问题标题】：Angular file includes and separation - Best practiceAngular 文件包含和分离 - 最佳实践
【发布时间】：2015-06-05 08:24:39
【问题描述】：

我的主页上有 3 个不同的链接。我试图让每个链接都转到一个看起来像这样的页面：

<link rel="stylesheet" href="/assets/common/temlate1.css">
</head>
<body>
<div ng-include="'/assets/common/template1.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template1.js" type="text/javascript"></script>
</body>

我需要主页上的每个链接都有不同的 css、html 和 js 文件与之关联。例如：

如果我单击链接 1：该文件将类似于上面的文件。如果我单击链接 2，文件将如下所示：

<link rel="stylesheet" href="/assets/common/temlate2.css">
</head>
<body>
<div ng-include="'/assets/common/template2.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template2.js" type="text/javascript"></script>
</body>

第三个链接将包含文件：模板3.css 模板3.html 模板3.js

实现我想要的最好的方法是什么。我不想将所有 css 和 js 文件包含在一起。我的意思是我不想在我的文件底部有这个：css 文件也是如此。

<script src="/assets/common/template1.js" type="text/javascript"></script>
<script src="/assets/common/template2.js" type="text/javascript"></script>
<script src="/assets/common/template3.js" type="text/javascript"></script>

我只向您展示网站的一小部分，以便这个问题易于理解。我在 head 部分有很多其他链接，在 body 标记上方有很多 js 链接。所有这些对所有 3 个模板都是通用的。因此，我想使用相同的文件，只替换上面提到的 3 个区域。

我该如何做到这一点？我希望有角度的解决方案。也许有人可以指出我正确的方向。

【问题讨论】：

标签： html css angularjs

【解决方案1】：

我认为您必须在 AngularJS 中定义不同的模块才能完成此操作。他们每个人都可以有自己的模板。

简而言之：

angular.module('page1');
angular.module('page2');
angular.module('page3');

它们都可以有自己的模板，分别是page1.html、page2.html等等……

这似乎是一个很好的解释：https://docs.angularjs.org/guide/module

【讨论】：