当 ng-app 获得名称时，ng-include 不起作用

Question

我正在使用 ng-include 来包含导航栏。结合 ng-app="" 它可以正常工作。但是当我使用名称（例如 ng-app="myApp"）时，它就不再起作用了。见例子。

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body >
        <div ng-app="">
        <div ng-include="'pages/navbar.html'"></div>
            <script src="app.js"</script>
        </div>

    </body>
</html>

app.js

var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
   });

上面的工作正常，但是当我插入名称“myApp”时，它会停止包括导航栏。

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body >
        <div ng-app="myApp">
            <div ng-include="'pages/navbar.html'"></div>
            <script src="app.js"</script>
        </div>

    </body>
</html>

为什么？

Answer 1

这里有错别字

<script src="app.js"</script>

应该是

<script src="app.js"></script>

只要它在 angular.js 之后加载，那么您的应用程序就应该能够找到 myApp 模块的声明（您已使用 ng-app="myApp" 要求它找到该声明

在浏览器控制台中检查任何错误 - 如果未加载脚本，您将看到类似 cannot find module 的错误

Answer 2

我相信您错过了以适当的样式包含您的app.js 文件。 您在控制台中遇到任何错误吗？

编辑

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body >
        <div ng-app="myApp">
            <div ng-include="'pages/navbar.html'"></div>

        </div>
<script src="app.js"></script>
    </body>
</html>