Question

我的主页上有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>

第三个链接将包含以下文件： template3.css template3.html template3.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个区域。

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

Answer 1

我认为您必须在AngularJS中定义不同的模块才能实现这一目标。他们每个人都有自己的模板。

简而言之：

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

他们都可以拥有自己的模板，分别是page1.html，page2.html等等......

这看起来很好解释：https://docs.angularjs.org/guide/module

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

1 个答案: