Question

我有一个包含多个HTML文件的文件夹。每个HTML文件都使用AngularJS并包含如下所示的相同声明;

    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>        
    <script src="vendor/ui-bootstrap-tpls-0.11.0.min.js"></script> 
    <script src="vendor/underscore-min.js"></script>    
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

我认为这是不好的做法，因为它违反了DRY（不要重复自己）的原则。我试图避免重复上面的声明，将它们放入名为header.html的html部分中，并将以下行<div ng-include src="'partials/header.html'"></div>放入文件夹中的每个HTML文件中。

但是，它不起作用，HTML页面没有正确呈现AngularJS范围。我的方法有问题，还是有更好的方法可以做到这一点？

Answer 1

AngularJS采用Single Page Application概念。

从技术上讲，这意味着您只有1个HTML文件（我们称之为index.html），其中包含<head>和<body>标记。
这意味着您可以将所有包含的脚本文件一次放入此index.html文件中。

通过使用ng-route或ui-router模块，您可以包含将“使用”相同脚本文件的其他部分HTML文件。

Answer 2

ng-include是一个AngularJS定义的指令。需要加载AngularJS才能正确解析。

但是，这里包含了angular.min.js作为header.html partial的一部分。当浏览器遇到ng-include时，它不知道它意味着什么，只是忽略它。因此，没有加载任何脚本和样式。

至少需要在主文件中加载angular.min.js.其他所有东西都可以在部分内部。

<script src="lib/angular/angular.min.js"></script>
...
<div ng-include src="'partials/header.html'"></div>

使用公共头来声明脚本src由AngularJS中的不同html文件共享

2 个答案: