Html 角度文件包括和分离-最佳实践_Html_Css_Angularjs

Html 角度文件包括和分离-最佳实践

html css angularjs

Html 角度文件包括和分离-最佳实践,html,css,angularjs,Html,Css,Angularjs,我的主页上有3个不同的链接。我试图让每个链接都指向一个类似以下内容的页面： <link rel="stylesheet" href="/assets/common/temlate1.css"> </head> <body> <div ng-include="'/assets/common/template1.html'" ng-controller="ControlsCtrl"></div> <script src="/asset

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

我如何做到这一点？我希望有一个解决办法。也许有人能给我指出正确的方向

我认为您必须在AngularJS中定义不同的模块才能实现这一点。它们可以各自有自己的模板

简言之：

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

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

这似乎是一个很好的解释：