2015-08-31 45 views
0

我打開了一個乾淨的plunker編輯器,添加了Angular並寫了一個表達式。但它不起作用。Plunker爲什麼不加載Angular?

The link

代碼:

<!DOCTYPE html> 

    <html> 



    <head data-ng-app=""> 
     <script data-require="[email protected]*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script> 
     <link href="style.css" rel="stylesheet" /> 
     <script src="script.js"></script> 
     </head> 

     <body> 
     <h1>Hello Plunker!</h1> 
     <div> 
      {{ 1 + 1 }} 
     </div> 
     </body> 

    </html> 

我是新來的兩個角和Plunker。我正在使用Firefox。誰能幫我?

+0

嘗試使用NG-應用,而數據-NG-的應用程序,它是更好的做法,在'' -tag ......所以請嘗試使用'' –

回答

0

它不起作用,因爲您將data-ng-app=""放在<head>標記上,而不是<body>,這是您的{{ 1 + 1 }}所在的位置。由於它不知道應該有應用程序,因此Angular不會評估該表達式並將其保留爲{{ 1 + 1 }}而不是2.

您還使用Angular 2.0而不是當前版本,它是完整的與當前版本相比,Angular的重製。爲當前版本<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="text/javascript"></script>添加腳本標記可修復此問題。

+0

謝謝,我想我解決了它 – user2969329

+0

@ user2969329另外,我注意到你使用了Angular 2.0而不是當前版本。我對Angular 2.0語法並不完全確定,但是如果您使用'',它會工作。 – bransonl

0

我已經更新了谷歌CDN的角度腳本。

您需要在腳本中添加一個模塊。

var app = angular.module('myApp',[]); 

,並在HTML頁面中添加對模塊的引用

<body ng-app="myApp"> 

見更新plunker:http://plnkr.co/edit/ObpHaAeV9UXITNiCbhqf?p=preview

+0

謝謝,它實際上是「myApp」的一部分,我已經幾次將ng-app移動了,它已經到處了:) – user2969329

0

使用New - >AngularJS用於創建正確的角plunker項目;

enter image description here