Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Kiến trúc MVC

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của AngularJS và kiến trúc MVC của nó. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau bước từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có một hiểu biết vững chắc về cách AngularJS thực hiện phép màu. Hãy cùng bắt đầu nhé!

AngularJS - MVC Architecture

MVC là gì?

Trước khi chúng ta深入研究 AngularJS, hãy nói về MVC. Không, nó không phải là một mẫu xe mới sang trọng - nó có nghĩa là Model-View-Controller. Hãy tưởng tượng nó như một công thức để tổ chức mã của bạn, giống như cách bạn có thể tổ chức tủ quần áo (nếu bạn gọn gàng hơn tôi!)

MVC là một mẫu thiết kế phân chia một ứng dụng thành ba thành phần chính:

  1. Model: Dữ liệu và logic kinh doanh
  2. View: Giao diện người dùng
  3. Controller: Người trung gian kết nối Model và View

Bây giờ, hãy cùng khám phá từng thành phần này trong ngữ cảnh của AngularJS.

The Model

Model trong AngularJS là nơi chúng ta lưu trữ dữ liệu. Nó giống như một tủ đựng tài liệu kỹ thuật số cho tất cả thông tin mà ứng dụng của chúng ta cần để hoạt động. Trong AngularJS, chúng ta thường sử dụng một thứ gọi là $scope để đại diện cho Model của mình.

Hãy nhìn vào một ví dụ đơn giản:

angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.name = "John Doe";
$scope.age = 30;
});

Trong đoạn mã này, chúng ta đang tạo một Model với hai piece của dữ liệu: name và age. Đối tượng $scope là Model của chúng ta, và nó đang giữ dữ liệu của chúng ta.

Vậy tại sao lại sử dụng $scope? Đó là vì nó giống như một cây cầu ma thuật giữa mã JavaScript của chúng ta và HTML của chúng ta. Bất kỳ dữ liệu nào chúng ta đặt trong $scope đều có thể dễ dàng hiển thị trong View (mà chúng ta sẽ thảo luận tiếp theo).

The View

View trong AngularJS là điều người dùng thấy và tương tác với. Nó là bộ mặt đẹp của ứng dụng chúng ta, được xây dựng với HTML và rắc một chút bụi thần kỳ của AngularJS (còn được gọi là directives).

Hãy xem cách chúng ta có thể hiển thị dữ liệu Model trong View:

<div ng-app="myApp" ng-controller="MyController">
<h1>Hello, {{name}}!</h1>
<p>You are {{age}} years old.</p>
</div>

Đây là những gì đang xảy ra trong HTML này:

  • ng-app="myApp"告诉 AngularJS ứng dụng của chúng ta bắt đầu từ đâu.
  • ng-controller="MyController" kết nối phần này của View với Controller của chúng ta (chúng ta sẽ thảo luận nhiều hơn về điều này sau).
  • {{name}} và {{age}} là các biểu thức hiển thị dữ liệu từ Model.

Khi AngularJS xử lý View này, nó sẽ thay thế {{name}} bằng "John Doe" và {{age}} bằng 30, dựa trên dữ liệu trong Model của chúng ta.

The Controller

Controller giống như người chỉ huy của một dàn nhạc. Nó điều phối Model và View, chỉ đạo chúng biết phải làm gì và khi nào làm. Trong AngularJS, chúng ta tạo Controllers bằng JavaScript.

Hãy mở rộng ví dụ của chúng ta:

angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.name = "John Doe";
$scope.age = 30;

$scope.celebrateBirthday = function() {
$scope.age++;
alert("Happy Birthday, " + $scope.name + "! You are now " + $scope.age + " years old.");
};
});

Trong Controller này:

  1. Chúng ta đang thiết lập dữ liệu Model ban đầu (name và age).
  2. Chúng ta đang định nghĩa một hàm celebrateBirthday tăng tuổi và hiển thị một thông báo.

Bây giờ, hãy cập nhật View của chúng ta để sử dụng hàm mới này:

<div ng-app="myApp" ng-controller="MyController">
<h1>Hello, {{name}}!</h1>
<p>You are {{age}} years old.</p>
<button ng-click="celebrateBirthday()">Celebrate Birthday</button>
</div>

Directive ng-click告诉 AngularJS gọi hàm celebrateBirthday khi nút được nhấn.

Đưa tất cả lại với nhau

Bây giờ chúng ta đã xem xét từng phần của MVC trong hành động, hãy xem cách chúng hoạt động cùng nhau:

  1. Model ($scope) giữ dữ liệu của chúng ta (name và age).
  2. View (HTML của chúng ta) hiển thị dữ liệu này và cung cấp cách cho người dùng tương tác với nó (nút).
  3. Controller quản lý logic, cập nhật Model khi nút được nhấn.
  4. AngularJS tự động cập nhật View mỗi khi Model thay đổi, vì vậy tuổi mới sẽ được hiển thị ngay lập tức.

Chu kỳ cập nhật này chảy qua kiến trúc MVC là điều làm cho AngularJS trở nên mạnh mẽ và nhạy bén.

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau tham quan nhanh chóng kiến trúc MVC của AngularJS. Nhớ rằng, giống như học bất kỳ kỹ năng mới nào, việc thành thạo AngularJS đòi hỏi sự luyện tập. Đừng nản lòng nếu nó không ngay lập tức hiểu rõ - ngay cả các nhà lập trình chuyên nghiệp cũng từng là người mới bắt đầu.

Tiếp tục thử nghiệm với các ví dụ mã, thử thay đổi chúng và xem会发生什么. Trước khi bạn biết, bạn sẽ đang xây dựng các ứng dụng phức tạp với AngularJS và làm cho bạn bè của bạn ngạc nhiên với kỹ năng lập trình mới của bạn!

Chúc các bạn lập trình vui vẻ, và願 Angular force đồng hành cùng bạn!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Thiết lập môi trường
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Đầu tiên