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

Cách tốt nhất để thấy sức mạnh của Ứng dụng AngularJS là tạo ứng dụng chương trình cơ bản đầu tiên “Hello World” trong Angular.JS.

Có nhiều môi trường phát triển tích hợp mà bạn có thể sử dụng để phát triển AngularJS, một số môi trường phổ biến được đề cập dưới đây. 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

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.

Chương trình thế giới chào mừng của AngularJS

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

Giải thích mã:

  1. Các "ứng dụng ngTừ khóa ” được sử dụng để biểu thị rằng ứng dụng này nên được coi là một ứng dụng js góc cạnh. Bất kỳ tên nào cũng có thể được đặt cho ứng dụng này.
  2. Bộ điều khiển là thứ được sử dụng để giữ logic nghiệp vụ. Trong thẻ h1, chúng ta muốn truy cập vào bộ điều khiển sẽ có logic để hiển thị “HelloWorld”, vì vậy có thể nói, trong thẻ này chúng ta muốn truy cập vào bộ điều khiển có tên “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” được sử dụng để tham chiếu tập lệnh Angular.js có tất cả các chức năng cần thiết cho AngularJS. Nếu không có tài liệu tham khảo này, nếu chúng ta cố gắng sử dụng bất kỳ hàm AngularJS nào, chúng sẽ không hoạt động.
  5. “Bộ điều khiển” 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 cụ thể của 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 tôi đang xác định một phương thức điều khiển có tên 'HelloWorldCtrl' đang được tham chiếu ở Bước 2.
  6. Chúng tôi đang tạo một “hàm” sẽ được gọi khi mã của chúng tôi gọi 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 Angular.js. Đối tượng $scope được sử dụng để quản lý dữ liệu giữa bộ điều khiển và khung nhìn.
  7. Chúng ta đang tạo một biến thành viên có tên là “message”, gán cho nó giá trị “HelloWorld” và gắn biến thành viên đó 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) và được sử dụng để xác định 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 để xác định bộ điều khiển có tên 'HelloWorldCtrl'. Logic thực tế cho bộ điều khiển sẽ được tạo ở (bước # 5).

Nếu lệnh đượ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ị.

Chương trình thế giới chào mừng của AngularJS