我的「Hello World」Angular JS無法正常工作

我一直在關注一個教程來學習Angular js，而我正在使用Web Storm 9.0.1。我的「Hello World」Angular JS無法正常工作

我剛剛創建了一個Html頁面，並將Angular.js文件加載到項目中。這是我簡單的代碼：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Hello World</title> 
</head> 
<body> 
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 
    <script src="angular.min.js"></script> 
    <script type="text/javascript"> 
     function HelloWorldCtrl($scope) { 
      $scope.helloMessage = "Hello World "; 
     } 
    </script> 
</body> 
</html>

但我得到當我運行的頁面是：{{helloMessage}}爲標題1！我該怎麼辦？我在這裏錯過了什麼？

來源

2014-12-03 Nada N. Hantouli

你不應該寫''而不是''？ – euvl 2014-12-03 14:33:48

我在跟隨的教程錯過了提及這一點。 – 2014-12-03 14:56:45

您需要：

<body ng-app>

這ngApp是需要做出瞭解AngularJS在那裏已經工作

這是你的工作代碼： http://plnkr.co/edit/lPOknrPD5dykwImL6Pb9?p=preview

來源

2014-12-03 14:35:16 Michael

未來，不再需要使用Plnkr或JSFiddle。 StackOverflow有其自己的內置片段執行。你只需要在你的答案中插入一段代碼。 – 2014-12-03 14:43:12

你只是還沒有初始化Angular應用程序。所有你需要做的就是修改你的body標籤。請注意下面的body標籤的ng-app屬性：

function HelloWorldCtrl($scope) { 
 
    $scope.helloMessage = "Hello World "; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app> 
 
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 
 
</body>

來源

2014-12-03 14:35:34

缺少的NG-應用指令：

<body ng-app="">...</body>

來源

2014-12-03 14:37:00 pixelbits

check Angular hello word in plunker

<html ng-app="plunker"> 
    <body ng-controller="MainCtrl"> 
     <p>Hello {{name}}!</p> 
    </body> 
    </html> 

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
});

來源

2014-12-03 14:37:31 zam

你總是需要把該指令首先。你也可以在其中或任何其他的HTML標籤。 ng-app指令告訴瀏覽器'嘿，這是一個Angular應用程序，讓我們看看腳本'。在ng-app之後，它會識別所有的Angular指令。

將角度腳本加載到html底部並放在主體後面也是更好的做法。建議最後加載它進行性能和屏幕加載推理。

來源

2014-12-03 14:39:06 user1607016

謝謝大家，是的確是問題在於缺少ng-app指令。注意：我正在關注的教程錯過了這一點！

一個工作代碼：

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <meta charset="utf-8" /> 
    <title>Hello World</title> 
    <!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <link href="css/default.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<header> 
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 
</header> 
<section> 
</section> 
<footer> 
</footer> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 

<script type="text/javascript"> 
    function HelloWorldCtrl($scope) { 
     $scope.helloMessage = "Hello World"; 
    } 
</script> 
</body> 
</html>

來源

2014-12-03 14:55:18

所有你需要做的就是定義你的頁面上的AngularJS應用。 ng-app指令定義了一個AngularJS應用程序。你可以做你喜歡網頁上：

<html ng-app=""> or

<body ng-app="">或

<div ng-app="">

確保你做到這一點，你開始寫另一角度JS代碼之前。

更多關於角JS基本面：

http://www.w3schools.com/angular/angular_intro.asp

來源

2014-12-03 15:40:00

試試這個代碼，如果你還沒有找到任何解決辦法呢。

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 

    <title> Hello World </title> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 

</head> 

<body> 

    <div ng-app="HelloWorldApp"> 

     <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 

    </div> 

    <script> 

     // INITIALIZE THE APP. 
     var hello = angular.module('HelloWorldApp', []); 

     // ADD THE CONTROLLER. 
     hello.controller(
      'HelloWorldCtrl', 
      ['$scope', function ($greet) { 
       $greet.helloMessage = 'Hello World!'; 
      } ] 
     ); 
    </script> 
</body> 
</html>

我在DIV元素中定義了「ng-app」指令，並在腳本中初始化了它。這樣我可以在DIV元素中添加多個視圖和控制器。

例如。在標題標籤下添加另一個DIV。

<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 

    <div ng-controller="greet"> 
     <span> {{greetings}} </span> 
    </div>

稍後將此代碼添加到腳本標記中。

// ADD THE SECOND CONTROLLER. 
    hello.controller(
     'greet', 
     ['$scope', function ($greet1) { 
      $greet1.greetings = 'Good Morning'; 
     } ] 
    );

來源

2015-01-11 13:46:37

改變你的角度版本爲1.2，我做到了，它的工作。那就是： https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js

來源

2017-04-15 11:37:09

我的「Hello World」Angular JS無法正常工作

回答

相關問題