AngularJS簡單的「你好，世界」不工作

試圖遵循教程，我無法得到「你好，世界」的例子工作。相反，它會顯示：「{{greeting.text}}，世界」。使用Chrome和AngularJS 1.3.1。AngularJS簡單的「你好，世界」不工作

的index.html：

<!DOCTYPE html> 
<html ng-app> 
    <head> 
     <script src="angular.js"></script> 
     <script src="app.js"></script> 
     <!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />--> 
    </head> 
    <body> 
     <div ng-controller='HelloController'> 
      <p>{{greeting.text}}, world </p> 
     </div> 
    </body> 
</html>

app.js

function HelloController($scope) { 
    $scope.greeting = { text: 'Hello' }; 
}

我的文件夾結構

root/ 
    angular.js 
    app.js 
    index.html

謝謝

來源

2014-11-05 StackPWRequirmentsAreCrazy

* 「試圖按照教程」 *你有什麼如下教程？ – 2014-11-05 15:12:48

如果您沒有使用任何http服務器，只需從磁盤打開index.html，則您的瀏覽器將不允許從磁盤加載腳本。那是你的情況嗎？ – Jarema 2014-11-05 15:15:17

@Jarema它可以讓你加載腳本，而不是ajax。他沒有執行任何Ajax。 – 2014-11-05 15:16:11

我希望這會有所幫助。

的index.html

<!DOCTYPE html> 
<html ng-app="appname"> 

    <head> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> 
    <link href="style.css" rel="stylesheet"/> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div ng-controller="appCtrl"> 
     <p>{{greeting.text}}, world </p> 
    </div> 
    </body> 

</html>

的script.js

var appname = angular.module('appname', []); 
appname.controller('appCtrl', ['$scope', 
    function($scope) { 
    $scope.greeting = { text: 'Hello' }; 
}]);

http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview

來源

2014-11-05 15:20:22

謝謝，它工作！介意解釋「['$ scope'」部分？或者指點我一個很好的教程？ – StackPWRequirmentsAreCrazy 2014-11-05 15:29:11

但爲什麼以前不工作？他們改變了什麼嗎？ – nikoloza 2014-11-05 15:36:08

@StackPWRequirmentsAreCrazy不要擔心，我只是自己開始學習AngularJS。我發現NG-Book非常有幫助，但您可以在Plnkr/Codepen上找到大多數示例/教程。關於$範圍這裏是一個鏈接，告訴你你需要知道的一切。 https://docs.angularjs.org/guide/scope – 2014-11-05 15:37:37

接受的答案是好的，但我想我會湊錢一些資源我如果你希望更好地理解我的工作方式，我發現它很有幫助ñ角

Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
塑造了角www.codeschool.com/courses/shaping-up-with-angular-js

兩者都是完全免費的課程，因爲egghead.io播放列表被拆分爲獨立概念的視頻，它也是非常好的參考資料。

angular.js developer guide也真的很有幫助！

來源

2014-11-05 16:40:15 rlf

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="myCntrl"> 
     Enter text: 
     <br /> 
     <input type="text" ng-model="hellomodel" /> 
     <br /> 
     <br /> 
     <h1> 
      {{hellomodel}}</h1> 
     <script language="javascript"> 
      var myapp = angular.module("myApp", []); 
      myapp.controller("myCntrl", function ($scope) { 
       $scope.hellomodel = "Hello World!"; 
      }); 
     </script> 
    </div> 
</body> 
</html>

http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx

來源

2015-11-25 05:20:36 Ram

回答了什麼是錯的問題，如果他們改變了一些東西。

AngularJs版本1.2或更早版本：控制器可能是未定義到模塊中的函數。就像在問題中一樣。

控制器

function HelloController($scope) { 
    $scope.greeting = { text: 'Hello' }; 
}

角1.3版或更新：控制器必須被定義成一個模塊。就像在答案中一樣。

控制器

var appname = angular.module('appname', []); 
appname.controller('appCtrl', ['$scope', 
    function($scope) { 
    $scope.greeting = { text: 'Hello' }; 
}]);

來源

2015-12-18 08:43:26

AngularJS簡單的「你好，世界」不工作

回答

相關問題