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

我是AngularJS的绝对新手，我有以下问题。为什么在这个简单的Angular示例中，似乎没有定义Angular？

昨天跑了这个非常简单的第一个AngularJS应用程序从教程下载amd它工作正常。

该应用程序是通过以下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中看到的那样 file inc路得当地app.js文件，AngularJS框架是：

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

和自举 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', []);

似乎看不到角框架和自举也，如果有正确包括在内，我可以在浏览器中打开以下链接：

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

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

，看的角度和引导代码。

那么为什么？可能是什么问题呢？ Yesteday它

来源

2015-11-02 AndreaNobili

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

你或者双击了该文件，并打开它，或者用浏览器的文件，把它打开 - >打开选项在这种情况下，它会使用file:///和网址，以引导打开 - //netdna......会没有解决，因为它会在本地文件系统中查找它。

如果你没有一个Web服务器，然后只需更改以下：

<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" />

来源

2015-11-02 16:21:41 Adam

在我看来，这很奇怪。要运行使用JavaScript的页面，我不需要在Web服务器中使用它。 Infact在这台机器上我没有安装Apache，昨天的例子运行得很好 – AndreaNobili

'//'前缀不一定是file：// moniker。这意味着负载应该跟随所使用的页面负载。即如果页面加载为http，则使用http;如果页面加载为https，则使用https。 –

@codenoire - 如果OP使用'file：///'协议加载页面，那么这是bootstrap不会加载的唯一情况（除非OP没有网络连接）。 – Adam

您正在使用的URL

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

如果你是在开发机器上，通常将使用http的绰号，不 HTTPS正常工作。浏览器不会从上面的URL加载，因为这是一个安全问题。将其更改为'http'或返回到'//'前缀。

来源

2015-11-02 16:17:15

如果你在我使用的代码看起来//code.angularjs.org /1.3.0-rc.1/angular.min.js – AndreaNobili

你应该看看这里。 http://stackoverflow.com/questions/6785442/browser-support-for-urls-beginning-with-double-slash –

@codenoire - 该CDN网址的http版本只需“307”重定向到“https”即可这没有什么区别。只要OP使用“http：s：”前缀放入一个完全合格的URL，他就会没事的。整个“昨天工作正常”意味着OP通过URL（例如'http：// localhost/myapp'）打开应用程序，今天通过'file：/// index.htm'打开它。 – Adam

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

回答

相关问题