Question

我在AngularJS中绝对是新的，我有以下问题。

昨天从教程开始运行这个非常简单的第一个AngularJS应用程序，它运行良好。

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

1） index.htm ：

$(".administrate-price").text(function(i, t) {
    return t.substr(0, t.length - 5);
});

2）包含 app.js 文件：

<!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>

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

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

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

}]);

和 BootStrap CSS框架：

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

昨天它工作正常但是今天当我尝试将 index.htm 文件打开到我的浏览器中时，我获得了没有使用BootStrap（没有CSS设置）并进入我获得的FireBug控制台此错误消息：

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

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

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

并查看Angular和BootStrap的代码。

为什么？可能是什么问题呢？是的，它运作良好

Answer 1

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

您已双击该文件并将其打开，或者使用浏览器的文件打开它 - ＆gt; open选项，在这种情况下，它将使用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" />

Answer 2

您正在使用网址

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

如果您使用的是开发计算机，通常会使用http名字 NOT https。浏览器无法从上面的URL加载，因为它是一个安全问题。将其更改为＆＃39; http＆＃39;或者回到＆＃39; //＆＃39;前缀。

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

2 个答案: