AngularJS - Ứng dụng đầu tiên - Amzuni - Học lập trình trực tuyến

Tạo ứng dụng AngularJS đầu tiên: Bước khởi đầu hoàn hảo

Chào mừng bạn đến với thế giới AngularJS! Chúng ta sẽ cùng nhau xây dựng một ứng dụng đơn giản để làm quen với các khái niệm cơ bản.

Bước 1: Thiết lập môi trường

Trình duyệt: Bất kỳ trình duyệt hiện đại nào như Chrome, Firefox, Edge đều được.
Trình soạn thảo code: Bạn có thể sử dụng các trình soạn thảo phổ biến như Visual Studio Code, Sublime Text, Atom…

Bước 2: Tạo một file HTML mới

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Ứng dụng AngularJS đầu tiên</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="MyController">   
    <p>Xin chào, {{name}}!</p>
  </div>

  <script>
    angular.module('myApp', [])
      .controller('MyController', function($scope) {
        $scope.name = 'World';
      });
  </script>
</body>
</html>

Giải thích code:

ng-app=”myApp”: Khai báo một module AngularJS có tên là “myApp”. Module là một container để nhóm các thành phần của ứng dụng lại với nhau.
ng-controller=”MyController”: Liên kết một controller có tên là “MyController” với một phần của DOM. Controller sẽ quản lý dữ liệu và logic cho phần đó.
{{name}}: Đây là một biểu thức AngularJS. Nó sẽ được thay thế bằng giá trị của biến name trong Model.
$scope.name = ‘World’: Trong controller, chúng ta tạo một biến name và gán giá trị “World” cho nó. Biến này sẽ được hiển thị trong View.

Bước 3: Chạy ứng dụng

Mở file HTML bằng trình duyệt của bạn.
Bạn sẽ thấy kết quả trên trình duyệt: “Xin chào, World!”.

Giải thích cách thức hoạt động

Khi trình duyệt tải trang, nó sẽ tìm kiếm các attribute bắt đầu bằng ng-.
AngularJS sẽ tìm thấy module myApp và khởi tạo nó.
Controller MyController được liên kết với phần tử div.
Biểu thức {{name}} được đánh giá và thay thế bằng giá trị của biến name trong Model.

Chúc mừng! Bạn đã tạo thành công ứng dụng AngularJS đầu tiên của mình.

Tiếp theo bạn có thể làm gì?

Thay đổi giá trị: Thay đổi giá trị của biến name để xem kết quả trên màn hình.
Thêm các controller khác: Tạo thêm các controller để quản lý các phần khác của ứng dụng.
Sử dụng các directive: Tạo các custom element và attribute để mở rộng khả năng của AngularJS.
Tạo các service: Chia sẻ dữ liệu và logic giữa các controller.

AngularJS – Ứng dụng đầu tiên