AngularJS Hello World: Chương trình ví dụ đầu tiên của bạn

Bởi: James Hartman James Hartman
Hours cập nhật

⚡ Tóm tắt thông minh

Chương trình "Hello World" của AngularJS chỉ cần một tệp HTML duy nhất, một tham chiếu script và hai directive, ng-app và ng-controller, để liên kết một biến phạm vi controller vào trang thông qua biểu thức ngoặc kép.

  • 🔘 ng-app: Thuộc tính ng-app đánh dấu phần tử gốc và tự động khởi tạo mô-đun AngularJS được đặt tên.
  • ☑️ ng-controller: ng-controller gắn HelloWorldCtrl vào phần tử h1, giúp cho phạm vi điều khiển có sẵn ở đó.
  • ✅ Ràng buộc phạm vi: Việc gán `$scope.message` bên trong bộ điều khiển sẽ cung cấp dữ liệu cho biểu thức `{{message}}` được hiển thị trong giao diện người dùng.
  • 🧪 Hàng một: Chỉ cần một tệp HTML cộng với một tham chiếu tập lệnh là có thể chạy ví dụ, không cần bước biên dịch nào.
  • 🛠️ Xử lý Sự cố: Việc xuất hiện dấu ngoặc nhọn trên màn hình hầu như luôn có nghĩa là thư viện chưa được tải hoặc ng-app bị thiếu.
  • 📊 Ghi chú phiên bản: Việc hỗ trợ AngularJS đã kết thúc vào tháng 1 năm 2022, với phiên bản 1.8.3 là bản phát hành cuối cùng; các công việc mới nên được thực hiện trên Angular.
Đọc thêm

Chương trình ví dụ đầu tiên của AngularJS Hello World sử dụng ng-app và ng-controller

Cách tốt nhất để thấy được sức mạnh của một ứng dụng AngularJS là tạo chương trình cơ bản đầu tiên của bạn, một ứng dụng "Hello World" bằng AngularJS.

Có rất nhiều môi trường phát triển tích hợp mà bạn có thể sử dụng cho AngularJS Trong quá trình phát triển, một số phương pháp phổ biến được đề cập bên dưới. Trong ví dụ của chúng tôi, chúng tôi đang sử dụng Webstorm như IDE của chúng tôi.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Xin chào thế giới, AngularJS

Ghi chú phiên bản: AngularJS 1.x đã ngừng hỗ trợ dài hạn vào ngày 31 tháng 12 năm 2021, và nhóm phát triển framework xác nhận điều này. Việc hỗ trợ AngularJS đã chính thức kết thúc. Vào tháng 1 năm 2022, với phiên bản 1.8.3 là bản phát hành cuối cùng và không có bản vá bảo mật nào sau đó. Mọi bước và khối mã bên dưới đều được giữ nguyên chính xác như đã viết. Các dự án mới nên được triển khai trên Angular hiện đại, nơi mà quy trình tương tự bắt đầu từ... ng serve và một thành phần độc lập và vẫn sử dụng cùng một phương pháp. {{ }} cú pháp nội suy.

Ví dụ bên dưới cho thấy cách dễ nhất để tạo ứng dụng “Hello world” đầu tiên của bạn trong AngularJS.

Ảnh chụp màn hình có chú thích bên dưới ghi nhãn từng phần của tệp đó, và bảy con số của nó khớp với... Code Danh sách giải thích ở bên dưới. Đoạn mã này được ghi lại từ bản dựng 1.4.0 cũ hơn, vì vậy dòng lệnh của nó khác với phiên bản được ghim trong mã.

Tệp HTML "Hello World" của AngularJS được chú thích với bảy chú thích được đánh số cho ng-app, ng-controller, tham chiếu script và biến scope.

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Giải thích:

  1. Các "ứng dụng ngTừ khóa “” được sử dụng để chỉ ra rằng ứng dụng này nên được coi là một ứng dụng AngularJS. Ứng dụng này có thể được đặt bất kỳ tên nào.
  2. Bộ điều khiển là nơi chứa logic nghiệp vụ. Trong thẻ h1, chúng ta muốn truy cập vào... điều khiển, phần này sẽ chứa logic để hiển thị “Hello World”, vì vậy ta có thể nói rằng, trong thẻ này ta muốn truy cập vào bộ điều khiển có tên là “HelloWorldCtrl”.
  3. Chúng tôi đang sử dụng một biến thành viên có tên là “message”, không có gì khác ngoài một trình giữ chỗ để hiển thị thông báo “Xin chào thế giới”.
  4. Thẻ “script tag” được sử dụng để tham chiếu đến tập lệnh angular.js chứa tất cả các chức năng cần thiết cho AngularJS. Nếu không có tham chiếu này, nếu chúng ta cố gắng sử dụng bất kỳ chức năng nào của AngularJS, chúng sẽ không hoạt động.
  5. “Controller” là nơi chúng ta thực sự tạo ra logic nghiệp vụ, tức là bộ điều khiển của chúng ta. Chi tiết về từng từ khóa sẽ được giải thích trong các chương tiếp theo. Điều quan trọng cần lưu ý là chúng ta đang định nghĩa một phương thức điều khiển có tên là 'HelloWorldCtrl', phương thức này được tham chiếu trong Bước 2.
  6. Chúng ta đang tạo một "hàm" sẽ được gọi khi mã của chúng ta gọi đến bộ điều khiển này. Đối tượng `$scope` là một đối tượng đặc biệt trong AngularJS, là một đối tượng toàn cục được sử dụng trong AngularJS. Đối tượng `$scope` được sử dụng để quản lý dữ liệu giữa bộ điều khiển và giao diện người dùng.
  7. Chúng ta tạo một biến thành viên có tên là “message”, gán cho nó giá trị “Hello World” và gắn biến thành viên này vào đối tượng phạm vi.

LƯU Ý: Lệnh ng-controller là một từ khóa được xác định trong AngularJS (Bước 2) được sử dụng để định nghĩa các bộ điều khiển trong ứng dụng của bạn. Ở đây, trong ứng dụng của chúng tôi, chúng tôi đã sử dụng từ khóa ng-controller để định nghĩa một bộ điều khiển có tên là 'HelloWorldCtrl'. Logic thực tế cho bộ điều khiển sẽ được tạo ra trong (Bước 5).

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Thông báo 'Xin chào thế giới' sẽ được hiển thị.

Cửa sổ trình duyệt có tiêu đề Guru99. Hiển thị tiêu đề "Hello World" từ biến phạm vi AngularJS.

Cách tải AngularJS: CDN hay tệp cục bộ?

Ví dụ trên hoạt động vì chỉ một dòng lệnh đã đưa framework vào trang trước khi trình duyệt đạt đến cuối phần thân trang. AngularJS được phân phối dưới dạng một gói duy nhất. JavaTệp kịch bản, vì vậy chương trình đầu tiên không cần bước biên dịch và không cần trình quản lý gói. Một tệp HTML đơn giản được mở trong trình duyệt là đủ.

Có hai cách để đưa tập tin đó vào.

  1. Tham khảo bản sao từ CDN. Ví dụ này chỉ ra rằng code.angularjs.org và ghim phiên bản 1.6.9. Máy chủ đó vẫn phục vụ các bản dựng 1.x, phiên bản cao nhất là 1.8.2, trong khi Google Hosted Libraries hiện không còn liệt kê AngularJS nữa.
  2. Tải xuống bản sao cục bộ. Lưu tệp đó bên cạnh trang HTML và trỏ thẻ script đến tệp đó. Bản sao cục bộ giúp ví dụ hoạt động ngoại tuyến, điều này rất quan trọng khi máy chủ proxy chặn CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Sử dụng angular.js trong khi học tập và angular.min.js Trong môi trường sản xuất: bản dựng chưa được tối ưu hóa in ra ngăn xếp có thể đọc được. tracTrong khi đó, bản dựng thu gọn lại báo cáo các biến đã được đổi tên.

Sau khi tập tin được tải, ng-app Khởi động khung sườn. AngularJS tìm kiếm thuộc tính đó khi tài liệu tải xong, coi phần tử mang thuộc tính đó là gốc biên dịch và khởi tạo mô-đun có tên trong giá trị của nó. Ba hệ quả sau đây xảy ra:

  • Chỉ có đầu tiên ng-app Trên một trang được khởi tạo tự động. Trang thứ hai sẽ bị bỏ qua trừ khi angular.bootstrap được gọi thủ công.
  • Giá trị phải chỉ định một mô-đun đã được đăng ký với góc cạnh.modulenếu không thì bảng điều khiển sẽ báo cáo [$injector:modulerr].
  • Đặt ng-app trên html Như ví dụ đã nêu, phần tử này đưa toàn bộ tài liệu vào AngularJS; một vùng chứa hẹp hơn cũng hoạt động tốt.

NHỮNG BÀI VIẾT LIÊN QUAN

Cách thức hoạt động của biểu thức {{ }} và liên kết ng-model

Niềng kép xung quanh message Trong thẻ h1 không có văn bản giữ chỗ nào được điền đầy khi tải trang. AngularJS biên dịch nút văn bản đó thành một trình theo dõi trên phần tử xung quanh. phạm vi, do đó kết quả hiển thị tracks $scope.message Chừng nào trang web còn hoạt động.

Chu trình diễn ra theo ba bước.

  1. Bộ điều khiển ghi một giá trị vào $scope.
  2. Một bước xử lý tóm tắt so sánh mọi biểu thức được theo dõi với kết quả trước đó của nó.
  3. Mỗi biểu thức có giá trị thay đổi sẽ được hiển thị lại tại chỗ.

Do đó, biểu thức nội suy là một chiều, từ phạm vi đến khung nhìn. Liên kết hai chiều cần mô hình ng, Các Chỉ thị Được thiết kế cho các điều khiển biểu mẫu. Thêm <input ng-model="message"> Bên cạnh tiêu đề, hãy nhập vào ô, và tiêu đề sẽ thay đổi sau mỗi lần nhấn phím, bởi vì ng-model ghi giá trị của trường trở lại cùng thuộc tính phạm vi mà biểu thức theo dõi.

Các biểu thức được giới hạn một cách có chủ ý. Chúng đọc các thuộc tính phạm vi, gọi các phương thức phạm vi và chấp nhận các giá trị không xác định một cách im lặng, nhưng chúng không thể khai báo biến, sử dụng các câu lệnh điều khiển luồng hoặc truy cập các đối tượng toàn cục như... window.

Cách khắc phục trang trắng hoặc trang chưa hiển thị {{ }}

Chương trình AngularJS đầu tiên gặp lỗi theo một trong hai cách dễ thấy: trang vẫn trống hoặc văn bản hiển thị không chính xác. {{message}} Dòng chữ "Hello World" xuất hiện ở vị trí đáng lẽ phải là "Hello World". Cả hai trường hợp đều có nghĩa là framework chưa bao giờ tiếp quản mã HTML. Hãy thực hiện các bước kiểm tra bên dưới theo thứ tự, với cửa sổ dòng lệnh của trình duyệt đang mở.

  1. Xác nhận thư viện đã được tải. Mở bảng điều khiển Mạng và tìm kiếm... angular.js Yêu cầu. Lỗi 404 hoặc CDN không thể truy cập sẽ khiến dấu ngoặc nhọn trên màn hình không bị thay đổi.
  2. Kiểm tra đường dẫn của tập lệnh. Đường dẫn tương đối sẽ được giải quyết dựa trên thư mục chứa tệp HTML, vì vậy một bản sao trong một js thư mục con cần js/angular.min.js.
  3. Xác minh ng-app. Thuộc tính bị thiếu hoặc viết sai chính tả sẽ không có tác dụng gì khi khởi động hệ thống. Thuộc tính được viết có dấu gạch ngang như sau: ng-app trong mã đánh dấu, mặc dù chỉ thị được viết theo kiểu camel-case. JavaKịch bản.
  4. Hãy đọc thông báo lỗi trên bảng điều khiển. [$injector:modulerr] Điều này có nghĩa là mô-đun được đặt tên bởi ng-app chưa bao giờ được đăng ký. [ng:areq] Thông thường, điều này có nghĩa là tên bộ điều khiển trong mã đánh dấu không khớp với tên được truyền vào. .controller().
  5. Hãy tìm một ng-app thứ hai. Chỉ phần tử đầu tiên được khởi tạo tự động, vì vậy một bản sao thừa còn sót lại trên một phần tử bên trong sẽ âm thầm vô hiệu hóa phần đó của trang.

Hai nguyên nhân khác nữa chiếm phần lớn trong các báo cáo còn lại.

  • Giao thức tập tin. Ví dụ chỉ với một tệp này hoạt động tốt khi được mở trực tiếp từ ổ đĩa, nhưng bất kỳ mẫu nào được tải về qua XHR đều bị chặn bởi các quy tắc nguồn gốc của trình duyệt. Hãy phục vụ thư mục đó qua HTTP sau khi các mẫu đã xuất hiện.
  • Một thoáng nhìn thấy niềng răng. Khi mã đánh dấu được hiển thị trước khi khung biên dịch, biểu thức thô sẽ hiển thị trong giây lát. Thêm ng-cloak đến phần tử, hoặc hoán đổi biểu thức cho ng-bind="message", vốn không bao giờ hiển thị mã đánh dấu của chính nó.

Nếu không có trường hợp nào trong số này áp dụng, hãy thu nhỏ trang về ví dụ trên và thêm mã của riêng bạn vào từng dòng một.

Câu Hỏi Thường Gặp

Bất kỳ phương pháp nào trong bốn phương pháp được liệt kê ở trên đều có thể sử dụng được, và ví dụ này sử dụng một trong số đó. WebstormVì chương trình chỉ là một tệp HTML tĩnh duy nhất, nên trình soạn thảo văn bản thuần túy là đủ. IDE chỉ bổ sung thêm tính năng tự động hoàn thành chỉ thị, tải lại trực tiếp và gỡ lỗi tích hợp.

$scope là đối tượng liên kết được chia sẻ giữa một điều khiển và tầm nhìn của nó. Việc viết `$scope.message` bên trong `HelloWorldCtrl` làm cho thuộc tính đó hiển thị với biểu thức được đặt trên phần tử `h1`.

Cả hai tập tin đều chứa cùng một framework. angular.js chưa được nén, vì vậy lỗi sẽ chỉ ra mã nguồn có thể đọc được. angular.min.js đã được nén để sử dụng trong môi trường sản xuất và cần chú thích phụ thuộc rõ ràng, vì quá trình nén sẽ đổi tên các tham số mà AngularJS kiểm tra.

AngularJS là framework phiên bản 1.x được hiển thị ở đây, hoạt động dựa trên các directive, $scope và các hàm thông thường. JavaScript. Angular, tức là phiên bản 2 trở lên, là một phần riêng biệt. TypeScript Khung phần mềm được xây dựng dựa trên các thành phần và là dòng sản phẩm được duy trì và bảo trì tích cực.

Chủ yếu dùng để duy trì các ứng dụng 1.x hiện có, vốn vẫn còn được sử dụng rộng rãi. Bao gồm từ vựng về liên kết, chỉ thị và... tiêm phụ thuộc Việc chuyển giao dự án vẫn được hỗ trợ, tuy nhiên việc hỗ trợ đã kết thúc vào tháng 1 năm 2022, vì vậy các dự án mới nên được triển khai trên Angular hiện đại.

Đúng vậy. Hãy đăng ký từng cái bằng `.controller()` trên cùng một module và gắn chúng vào các phần tử khác nhau bằng `ng-controller`. Mỗi cái sẽ nhận được phạm vi con riêng, vì vậy các thuộc tính có cùng tên vẫn độc lập với nhau.

Các trợ lý ảo hiện đại đọc mã nguồn phiên bản 1.x và tạo ra một danh sách các chỉ thị, bộ lọc và dịch vụ cùng với các đề xuất về thành phần và dịch vụ tương đương. Danh sách này hữu ích cho việc hiệu chỉnh mã nguồn.ping công việc, mặc dù mọi bản đồping Vẫn cần xác minh thủ công.

Trợ lý GitHub hoàn thành phần mã mẫu của bộ điều khiển, các phép gán $scope và ng-gửi Các trình xử lý đến từ một bình luận ngắn, nhưng quá trình đào tạo của nó nghiêng về Angular hiện đại, vì vậy hãy kiểm tra xem các đề xuất có thực sự sử dụng cú pháp 1.x hay không.

Tóm tắt bài viết này với: