为什么在这个简单的 Angular 示例中似乎没有定义 Angular？答案

【问题标题】：Why in this simple Angular example it seems that Angular is not defined?为什么在这个简单的 Angular 示例中似乎没有定义 Angular？
【发布时间】：2016-02-02 14:19:36
【问题描述】：

我是 AngularJS 的新手，但遇到以下问题。

昨天从教程中运行了这个非常简单的第一个 AngularJS 应用程序下载并且运行良好。

应用程序由以下2个文件组成：

1) index.htm：

<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
    <head>
        <title>Introduction to AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body
            {
                font-size: 1.1em;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-controller="mainController">

                <h1>Hello world!</h1>

            </div>

        </div>

    </body>
</html>

2) 以及包含的 app.js 文件：

// MODULE
var angularApp = angular.module('angularApp', []);

// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {

}]);

正如您在 index.htm 文件中所见，包含本地 app.js 文件，AngularJS 框架由：

<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>

和BootStrap CSS框架由：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

昨天它运行良好，但今天当我尝试在浏览器中打开 index.htm 文件时，我发现未使用 BootStrap（没有 CSS 设置）并进入我获得的 FireBug 控制台此错误消息：

ReferenceError: angular is not defined
var angularApp = angular.module('angularApp', []);

如果正确包含，似乎也看不到 Angular 框架和 BootStrap，我可以在浏览器中打开以下链接：

//code.angularjs.org/1.3.0-rc.1/angular.min.js

//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

并查看 Angular 和 BootStrap 的代码。

那为什么？可能是什么问题呢？昨天还好好的

【问题讨论】：

标签： javascript html angularjs angularjs-scope

【解决方案1】：

您正在使用网址

https://code.angularjs.org/1.3.0-rc.1/angular.min.js

如果您在开发机器上，通常它会使用 http 名字对象，NOT https。因此，浏览器不会从上面的 URL 加载，因为这是一个安全问题。将其更改为“http”或返回“//”前缀。

【讨论】：

如果你查看我使用的代码 //code.angularjs.org/1.3.0-rc.1/angular.min.js
你也应该看看这里。 stackoverflow.com/questions/6785442/…
@codenoire - 该 CDN URL 的 http 版本只是 307 重定向到 https，因此这没有什么区别。只要 OP 输入带有 http(s): 前缀的完全限定 URL，那么他就可以了。整个“昨天运行良好”意味着 OP 通过 URL（例如 http://localhost/myapp）打开了应用程序，而今天通过 file:///index.htm 打开了它

【解决方案2】：

您必须通过 URL 打开它 - 例如http://localhost/myapp/index.htm，不使用file:///协议

您已经双击文件并打开它，或者使用浏览器的文件打开它 -> 打开选项在这种情况下，它将使用 file:/// 和引导 URL - //netdna...... 将无法解析为它将在本地文件系统中查找它。

如果您没有网络服务器，则只需更改以下内容：

<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

到这里：

<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

【讨论】：

在我看来很奇怪。要运行使用 JavaScript 的页面，我不需要在 Web 服务器中使用它。事实上，在这台机器上我没有安装 Apache，昨天的例子运行良好
'//' 前缀不一定是 file:// 名字对象。这意味着负载应该遵循所使用的页面负载。即如果页面加载为 http，则使用 http；如果页面加载为 https，请使用 https。
@codenoire - 如果 OP 使用 file:/// 协议加载页面，这是唯一不会加载引导程序的情况（当然，除非 OP 没有网络连接)。
@AndreaNobili - 这个页面唯一可行的方法（如果你一直使用 // 而不是完全限定的 http(s):// 在你对引导程序/角度库的引用之前是如果它被加载到 http 而不是 file:///
Angular 和 bootstrap 的东西在 CDN 上。如果页面是使用 file:// 协议加载的，那么这些 url 不会使用 '//' 前缀。