AngularJS là gì? ArchiCấu trúc, Tính năng & Ưu điểm

AngularJS là gì?

AngularJS là một framework Model-View-Controller (MVC) mã nguồn mở được viết bằng... JavaScriptAngularJS là một trong những framework web phổ biến nhất thập niên 2010 và được sử dụng để phát triển...ping Chủ yếu là các ứng dụng trang đơn (Single Page Applications). Khung phần mềm này được phát triển bởi một nhóm các nhà phát triển đến từ... Google chính nó.

Nhờ sự ủng hộ to lớn của Google Nhờ những ý tưởng từ một diễn đàn cộng đồng rộng lớn, khung phần mềm này luôn được cập nhật trong suốt thời gian hoạt động. Nó cũng tích hợp các xu hướng phát triển hàng đầu của thời kỳ đó, đó là lý do tại sao rất nhiều mã sản phẩm vẫn đang chạy trên nền tảng này cho đến ngày nay.

Có một điểm về thuật ngữ cần được làm rõ ngay từ đầu. AngularJS thường được mô tả là một framework MVC, đây là một điểm khởi đầu hữu ích. Tuy nhiên, chính nhóm phát triển AngularJS lại thích sử dụng nhãn hiệu này hơn. MVW (Model-View-Whatever), bởi vì môi trường thực thi hoạt động gần giống với mô hình Model-View-ViewModel hơn là MVC cổ điển. (Thông tin chính thức) Tài liệu AngularJS Nó được gọi là một khung cấu trúc cho các ứng dụng web động. Sau khi đã làm rõ điều đó, đây là cách các thành phần kết hợp với nhau.

AngularJS Archikiến trúc

AngularJS tuân theo kiến ​​trúc MVC. Sơ đồ khung MVC được hiển thị bên dưới:

AngularJS Archisơ đồ kiến ​​trúc

Mỗi trong ba lớp đều có một nhiệm vụ rõ ràng:

• Bộ điều khiển đại diện cho lớp có logic nghiệp vụ. Sự kiện của người dùng sẽ kích hoạt các chức năng được lưu trữ bên trong bộ điều khiển của bạn. Các sự kiện của người dùng là một phần của bộ điều khiển.
• Các View được sử dụng để thể hiện lớp trình bày được cung cấp cho người dùng cuối.
• Các mô hình được sử dụng để biểu diễn dữ liệu của bạn. Dữ liệu trong mô hình của bạn có thể đơn giản như chỉ có các khai báo nguyên thủy. Ví dụ, nếu bạn đang duy trì một ứng dụng sinh viên, mô hình dữ liệu của bạn có thể chỉ có một id sinh viên và một tên. Hoặc nó cũng có thể phức tạp bằng cách có một mô hình dữ liệu có cấu trúc. Nếu bạn đang duy trì một ứng dụng sở hữu ô tô, bạn có thể có các cấu trúc để xác định chính chiếc xe theo dung tích động cơ, sức chứa chỗ ngồi, v.v.

Trên thực tế, bộ điều khiển hiếm khi tự tay đẩy dữ liệu vào giao diện người dùng. AngularJS theo dõi mô hình và tự động làm mới giao diện cho bạn, và quá trình đồng bộ hóa tự động đó được hỗ trợ bởi bộ tính năng được mô tả tiếp theo.

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

AngularJS sở hữu những tính năng chính sau đây, khiến nó trở thành một trong những framework mạnh mẽ nhất trên thị trường:

1. VMC – Framework được xây dựng dựa trên khái niệm nổi tiếng về MVC (Model-View-Controller). Đây là một mẫu thiết kế được sử dụng trong tất cả các ứng dụng web hiện đại. Mẫu này dựa trên việc chia lớp logic nghiệp vụ, lớp dữ liệu và lớp trình bày thành các phần riêng biệt. Việc phân chia thành các phần khác nhau được thực hiện để mỗi phần có thể được quản lý dễ dàng hơn.
2. Liên kết mô hình dữ liệu – Bạn không cần phải viết mã đặc biệt để liên kết dữ liệu với các điều khiển HTML. Điều này có thể được thực hiện bằng AngularJS chỉ bằng cách thêm một vài đoạn mã.
3. Viết ít mã hơn – Khi thực hiện thao tác DOM nhiều JavaScript Trước đây, việc thiết kế bất kỳ ứng dụng nào đều yêu cầu viết rất nhiều mã. Nhưng với AngularJS, bạn sẽ ngạc nhiên với lượng mã cần viết để thao tác DOM ít hơn nhiều.
4. đơn vị Kiểm tra sẵn sàng – Các nhà thiết kế tại Google Không chỉ phát triển AngularJS mà còn phát triển một framework kiểm thử có tên là “Karma”, giúp thiết kế các bài kiểm thử đơn vị cho các ứng dụng AngularJS.
5. Chỉ thị – Các dấu hiệu như ng-app, ng-model và ng-repeat Thêm hành vi cho các phần tử HTML thông thường.

Các tính năng này dễ hiểu nhất khi bạn đã chạy thử chúng, vì vậy phần tiếp theo sẽ hướng dẫn xây dựng một trang hoạt động từ đầu.

Hướng dẫn cài đặt AngularJS và xây dựng ứng dụng đầu tiên của bạn

Đọc về liên kết dữ liệu là một chuyện, còn xem nó hoạt động lại là chuyện khác. AngularJS không cần trình quản lý gói, trình đóng gói hay trình biên dịch, vì vậy ứng dụng đầu tiên của bạn chỉ là một tệp HTML duy nhất chạy trực tiếp từ ổ cứng.

Bước 1) Thêm thư viện AngularJS

Tải thư viện từ CDN bằng một thẻ script. Phiên bản 1.8.3 là phiên bản AngularJS cuối cùng, vì vậy hãy cố định trang của bạn ở phiên bản chính xác này thay vì một phiên bản không cố định.

Bước 2) Đánh dấu thư mục gốc của ứng dụng bằng ng-app

Chỉ thị `ng-app` cho trình biên dịch AngularJS biết nó sở hữu phần nào của trang. Việc đặt nó vào thẻ `<html>` sẽ giao toàn bộ tài liệu cho framework, và giá trị bạn cung cấp cho nó sẽ đặt tên cho module mà bạn sắp tạo.

Bước 3) Liên kết dữ liệu với ng-model và một biểu thức

Chỉ thị `ng-model` liên kết một phần tử `input` với một thuộc tính trên phạm vi, và một biểu thức ngoặc kép sẽ in thuộc tính đó ở một vị trí khác trên trang. Vì liên kết là hai chiều, nên...ping Trong hộp thoại, tiêu đề được cập nhật ngay lập tức mà không cần trình xử lý sự kiện nào của riêng bạn.

Bước 4) Thêm bộ điều khiển cho logic

Bộ điều khiển là một thiết bị đơn giản. JavaHàm script nhận đối tượng `$scope` và thiết lập các giá trị ban đầu cho nó. Việc đăng ký hàm này trong module sẽ giúp nó khả dụng cho chỉ thị `ng-controller`.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Bước 5) Chạy trang và kiểm tra kết quả.

Lưu tệp tin dưới dạng index.html và mở nó trong bất kỳ trình duyệt nào. Ban đầu tiêu đề sẽ hiển thị “Hello World!”, và nó sẽ tự động viết lại mỗi khi bạn gõ phím. Không cần máy chủ web và không cần bước biên dịch nào.

Nếu không có gì hiển thị, hãy mở bảng điều khiển trình duyệt và xác nhận rằng tập lệnh CDN đã được tải và tên mô-đun bên trong ng-app khớp chính xác với tên được truyền cho angular.module, vì nếu không khớp sẽ gây lỗi mà không báo lỗi. Trang nhỏ đó đã chứng minh được những ưu điểm được mô tả tiếp theo.

Ưu điểm của AngularJS

Dưới đây là những ưu điểm của AngularJS:

• Vì đây là một framework mã nguồn mở, bạn có thể kỳ vọng số lượng lỗi hoặc sự cố sẽ ở mức tối thiểu.
• Liên kết hai chiều – AngularJS giữ cho lớp dữ liệu và lớp trình bày luôn đồng bộ. Bạn không cần phải viết thêm mã. JavaĐoạn mã script này giúp đồng bộ hóa dữ liệu trong mã HTML và lớp dữ liệu của bạn. AngularJS sẽ tự động thực hiện điều này cho bạn. Bạn chỉ cần chỉ định điều khiển nào được liên kết với phần nào của mô hình.
• Định tuyến – AngularJS có thể xử lý việc định tuyến, nghĩa là chuyển đổi giữa các khung nhìn khác nhau. Đây là nguyên tắc cơ bản của các ứng dụng trang đơn; cho phép bạn chuyển đến các chức năng khác nhau trong ứng dụng web dựa trên tương tác của người dùng nhưng vẫn ở trên cùng một trang.
• AngularJS hỗ trợ kiểm thử, cả về mặt lý thuyết lẫn thực tiễn. Kiểm tra đơn vịvà Thử nghiệm hội nhập.
• Nó mở rộng HTML bằng cách cung cấp các phần tử riêng gọi là chỉ thị (directives). Ở cấp độ cao, chỉ thị là các dấu hiệu trên một phần tử DOM (chẳng hạn như thuộc tính, tên phần tử, chú thích hoặc lớp CSS) cho trình biên dịch HTML của AngularJS biết cần gán một hành vi cụ thể cho phần tử DOM đó. Các chỉ thị này giúp mở rộng chức năng của các phần tử HTML hiện có để mang lại nhiều sức mạnh hơn cho ứng dụng web của bạn.

Ưu điểm của AngularJS

Một cái nhìn cân bằng cũng quan trọng không kém, vì vậy những sự đánh đổi sẽ được trình bày tiếp theo.

Nhược điểm và hạn chế của AngularJS

Mỗi framework đều có những hạn chế riêng, và AngularJS cũng không ngoại lệ. Dưới đây là những hạn chế thường được các nhóm bảo trì ứng dụng AngularJS báo cáo:

• Không có lớp bảo mật riêng. – AngularJS không cung cấp chức năng xác thực hay ủy quyền, vì vậy cả hai đều phải được thực thi ở phía máy chủ.
• Hoàn toàn phụ thuộc vào JavaScript – Nếu khách truy cập vô hiệu hóa JavaKhi sử dụng script, trang sẽ chuyển về định dạng HTML cơ bản và không hiển thị.
• Hiệu suất chu trình tiêu hóa – Các thay đổi được phát hiện bằng cách liên tục so sánh các giá trị được theo dõi, vì vậy các trang có vài nghìn liên kết có thể hoạt động chậm.
• Một đường cong học tập dốc – Phạm vi, chỉ thị, nhà máy, dịch vụ và nhà cung cấp thường chồng chéo nhau, và thường có nhiều cách để đạt được cùng một kết quả.
• Công cụ tìm kiếm hiện hữu – Các khung nhìn được lắp ráp trong trình duyệt, vì vậy cần thực hiện thêm các thao tác như tiền xử lý trước khi trình thu thập thông tin lập chỉ mục các trang một cách đáng tin cậy.
• Không có thông tin cập nhật nào khác. – Kể từ ngày 31 tháng 12 năm 2021, không có bản vá chính thức nào được phát hành, do đó, lỗ hổng bảo mật mới được phát hiện vẫn chưa được khắc phục trừ khi có nhà cung cấp thương mại cung cấp bản vá.

Điểm cuối cùng đó khiến hầu hết các nhóm hướng tới khung phần mềm kế nhiệm, một sản phẩm khác biệt dù có cùng tên gọi.

AngularJS so với Angular: Sự khác biệt là gì?

AngularJS và Angular thường bị nhầm lẫn vì tên gọi rất giống nhau, nhưng chúng là hai framework riêng biệt với ngôn ngữ, kiến ​​trúc và dòng phiên bản khác nhau. AngularJS chỉ đề cập đến dòng 1.x được mô tả trên trang này. Angular đề cập đến phiên bản 2 và tất cả các phiên bản sau đó, một bản viết lại hoàn toàn được phát hành vào năm 2016 và vẫn đang được phát triển tích cực. Code Nó không di chuyển giữa chúng nếu không có sự can thiệp di cư có chủ đích.

Hậu quả thực tế là một controller AngularJS không thể đơn giản được tích hợp vào một dự án Angular. Việc chuyển đổi đòi hỏi phải viết lại từng controller như một component, vì vậy hãy lên kế hoạch cho nó như một công việc kỹ thuật thực sự chứ không phải là một bản nâng cấp. Tóm lại, hãy coi AngularJS như một kỹ năng bảo trì và Angular như một nền tảng cho việc phát triển mới.

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