2014-11-05 20 views
21

Cố gắng làm theo một hướng dẫn, tôi không thể lấy ví dụ "Hello, world" làm việc. Thay vào đó nó sẽ hiển thị: "{{greeting.text}}, world". Sử dụng Chrome và AngularJS 1.3.1.AngularJS đơn giản "Xin chào, thế giới" không hoạt động

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' }; 
} 

cấu trúc thư mục My

root/ 
    angular.js 
    app.js 
    index.html 

Cảm ơn bạn

+3

* "Cố gắng làm theo hướng dẫn" * hướng dẫn gì bạn đang theo dõi? –

+1

nếu bạn không sử dụng bất kỳ máy chủ http nào và chỉ cần mở index.html từ đĩa, Trình duyệt của bạn sẽ không cho phép tải tập lệnh từ đĩa. Đó có phải là trường hợp của bạn không? – Jarema

+4

@Jarema nó sẽ cho phép bạn tải các tập lệnh, không chỉ ajax. anh ấy không thực hiện bất kỳ ajax nào. –

Trả lời

28

Tôi hy vọng điều này sẽ hữu ích.

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

+0

Cảm ơn bạn, nó đã hoạt động! Tâm giải thích phần "['$ phạm vi" "? Hoặc chỉ cho tôi một hướng dẫn tốt? – StackPWRequirmentsAreCrazy

+8

Nhưng tại sao trước đó không hoạt động? Họ có thay đổi gì không? – nikoloza

+0

@StackPWRequirmentsAreCrazy Đừng lo lắng về điều đó, tôi chỉ mới bắt đầu học AngularJS. Tôi tìm thấy NG-Book thực sự hữu ích nhưng bạn có thể tìm thấy hầu hết các ví dụ/hướng dẫn về Plnkr/Codepen chỉ là tốt. Về phạm vi $ ở đây là một liên kết cho bạn biết mọi thứ bạn cần biết. https://docs.angularjs.org/guide/scope –

3

Câu trả lời được chấp nhận là tốt nhưng tôi nghĩ rằng tôi muốn trong chip với một số tài nguyên tôi đã được tìm thấy hữu ích nếu bạn đang tìm kiếm một sự hiểu biết tốt hơn về cách mọi thứ hoạt động tôi n góc

  • Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
  • Shaping với www.codeschool.com/courses/shaping-up-with-angular-js góc

Cả hai đều là các khóa học hoàn toàn miễn phí và vì danh sách phát egghead.io được chia thành các video cho các khái niệm riêng biệt, nó cũng là tài liệu tham khảo thực sự tốt.

angular.js developer guide cũng thực sự hữu ích!

4
<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

12

Trả lời câu hỏi về những gì là sai và nếu họ thay đổi một cái gì đó.

  • AngularJs Phiên bản 1.2 hoặc cũ hơn: Bộ điều khiển có thể là chức năng không được xác định trong mô-đun. Giống như trong câu hỏi.

khiển

function HelloController($scope) { 
    $scope.greeting = { text: 'Hello' }; 
} 
  • Version góc 1.3 hoặc mới hơn: Bộ điều khiển phải được xác định vào một mô-đun. Giống như trong câu trả lời.

khiển

var appname = angular.module('appname', []); 
appname.controller('appCtrl', ['$scope', 
    function($scope) { 
    $scope.greeting = { text: 'Hello' }; 
}]); 
Các vấn đề liên quan