AngularJS là gì?

AngularJS là một framework mã nguồn mở được phát triển bởi Google, giúp đơn giản hóa việc xây dựng các ứng dụng web động, đặc biệt là ứng dụng trang đơn (SPA - Single Page Application). Với AngularJS, các lập trình viên có thể xây dựng giao diện tương tác, trực quan và xử lý dữ liệu một cách hiệu quả nhờ các tính năng mạnh mẽ mà framework này cung cấp.

AngularJS hoạt động dựa trên kiến trúc MVC (Model-View-Controller), một mô hình phổ biến trong phát triển ứng dụng web. Kiến trúc này chia ứng dụng thành ba thành phần chính:

Model (M): Đại diện cho dữ liệu và các quy tắc kinh doanh, chịu trách nhiệm quản lý và lưu trữ dữ liệu.

View (V): Giao diện người dùng, nơi dữ liệu từ Model được hiển thị và tương tác.

Controller (C): Thành phần trung gian, xử lý logic ứng dụng, nhận đầu vào từ View và cập nhật Model hoặc View dựa trên các thay đổi.

Các tính năng cơ bản của AngularJS

AngularJS cung cấp nhiều tính năng mạnh mẽ giúp lập trình viên phát triển ứng dụng web dễ dàng hơn:

Modules:

Module là vùng chứa giúp tổ chức ứng dụng thành các thành phần riêng biệt.

Để tạo module, sử dụng hàm angular.module. Sau đó, có thể thêm bộ điều khiển (controller) và tham chiếu nó bằng chỉ thị ng-controller.

Ví dụ:

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {

$scope.message = "Hello, AngularJS!";

});

Scope:

Scope là một đối tượng liên kết giữa HTML (View) và JavaScript (Controller).

Nó đóng vai trò như một container để lưu trữ các thuộc tính và phương thức mà View có thể truy cập.

Controller:

Controller điều khiển dữ liệu và logic ứng dụng trong AngularJS.

Sử dụng chỉ thị ng-controller để kết nối View với Controller.

Ví dụ:

<div ng-controller="myController">

<h1>{{ message }}</h1>

</div>

Directive:

Directive cho phép mở rộng HTML bằng cách thêm các thuộc tính, thẻ hoặc class tùy chỉnh.

Các chỉ thị phổ biến gồm:

ng-app: Khởi tạo ứng dụng AngularJS.

ng-model: Liên kết dữ liệu hai chiều giữa View và Model.

ng-repeat: Lặp qua các phần tử trong một mảng hoặc danh sách.

ng-if: Hiển thị phần tử nếu điều kiện đúng.

Expression:

Biểu thức trong AngularJS được viết trong dấu ngoặc kép {{}} để hiển thị dữ liệu hoặc thực hiện tính toán trực tiếp trong View.

Ví dụ:

<p>2 + 2 = {{ 2 + 2 }}</p>

Filter:

Filter được sử dụng để định dạng dữ liệu hoặc chuyển đổi dữ liệu theo yêu cầu.

Các filter thông dụng:

currency: Hiển thị dữ liệu dưới dạng tiền tệ.

date: Định dạng ngày tháng.

uppercase và lowercase: Chuyển đổi chữ viết thường hoặc viết hoa.

limitTo: Giới hạn số lượng phần tử được hiển thị.

filter: Lọc các phần tử theo điều kiện.

Ví dụ:

<p>{{ price | currency }}</p>

<p>{{ date | date:'dd/MM/yyyy' }}</p>

AngularJS không chỉ mạnh mẽ ở khả năng tổ chức và quản lý dữ liệu mà còn giúp lập trình viên giảm thiểu mã lệnh phức tạp nhờ cơ chế liên kết dữ liệu (two-way data binding) và các tính năng tương tác linh hoạt. Tuy nhiên, AngularJS hiện đã được thay thế bởi các phiên bản mới hơn như Angular 2+ với hiệu suất cao hơn và cấu trúc hiện đại hơn.