爲什麼在這個簡單的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？

回答

相關問題