AngularJS là gì?

AngularJs là một Javascript Framework được tạo ra để xây dựng các ứng dụng web động (dynamic web app), nó thường được sử dụng để tạo ra các ứng dụng một trang ( Single Page Application - SPA). Và hoạt động dựa trên việc mở rộng thêm các thuộc tính (attribute) cho các thẻ của HTML (Các thuộc tính theo quy tắc của Angular). AngularJS là một nền tảng miễn phí và được hàng ngàn lập trình viên trên thế giới ưa chuộng.

Lịch sử phát triển AngularJS

AngularJS version 1.0 được phát hành vào năm 2012. Miško Hevery, một nhân viên của Google, bắt đầu phát triển AngularJS vào năm 2009. Ý tưởng sau đó được công bố rộng rãi, và dự án AngularJS sau đó đã được Google hỗ trợ chính thức. Angular có 2 phiên bản hoàn toàn khác nhau, phiên bản 1 và phiên bản khác 1.

Version 1:

Phiên bản 1 có tên chính thức là AngularJS, hiện tại nó đã được ngừng phát triển. Ngày 9 tháng 8 năm 2018 phiên bản 1.7.3 được phát hành. Dưới đây là các mốc thời gian:
Version Release Date (dd/MM/yyyy)
1.7.3 09/08/2018
1.7.2 12/06/2018
1.7.1 08/06/2018
1.7.0 11/05/2018
1.6.10 18/04/2018
1.6.9 02/02/2018
1.6.8 22/12/2017
1.6.7 25/11/2017
1.6.6 18/08/2017
Phiên bản Angular1 (angularJS) thực sự dựa trên Javascript, các lập trình viên sẽ viết mã theo ngôn ngữ Javascript, vì vậy có vẻ là dễ học dễ làm và các nhà tuyển dụng dễ tìm được ứng viên. Nhưng về mặt hiệu năng nó đang bị cộng đồng lập trình viên mang ra so sánh với ReactJS. Nhiều công ty phát triển phần mềm muốn xây dựng một sản phẩm mới thường cân nhắc sử dụng Angular phiên bản khác 1.

Version 2, 3, 4, ..

Bắt đầu từ phiên bản 2 nó có tên chính thức là Angular. Ngày 4 tháng 5 năm 2018 phiên bản 6 chính thức được phát hành. Dưới đây là các mốc sự kiện:
Version Release Date (dd/MM/yyyy)
7.0.0 12/2018 (?)
6.0.0 05/05/2018
5.0.0 01/11/2017
4.0.0 12/12/2016
2.0.0 23/10/2014 (*)
Angular phiên bản 2 trở lên có tư duy thay đổi hoàn toàn so với Angular1. Sự thay đổi này được tạo ra với tham vọng sẽ giúp Angular đánh bại ReactJS.
Một số cải tiến của Angular theo tư duy mới:
Component:
Ý tưởng chủ đạo của Angular4 mới là Component (Thành phần), Component không có gì xa lạ trong ReactJS, nhưng Componentlà khái niệm mới mà Angular1 (AngularJS) không có. Component được Angular4 áp dụng để tạo cấu trúc code rõ ràng và có khả năng tái sử dụng lại các component có sẵn.
Typescript:
Typescript được Miscrosoft phát triển để viết mã Javascript mang phong cách tính hướng đối tượng (Object-oriented). Bản thân Javacript nguyên thủy được thiết kế rất đơn giản và đi theo hướng lập trình chức năng (Functional programming) nên sẽ không có tính năng kế thừa, đa hình,...
Typescript mang một số tính năng cho Javascript như: kế thừa, kiểu dữ liệu, hàm khởi tạo,… Có thể nói, Typescript làm cho javascript mang phong cách rất "Java". Về mặt bản chất nhiều cú pháp của Typescript không được trình duyệt hiểu, vì vậy nó không thể chạy trực tiếp trên trình duyệt, vì vậy cần 1 bước đó là biên dịch (compile) mã Typescript thành Javascript thông thường. Vai trò của Typescript như là một ngôn ngữ trung gian, nó thường được biết tới như là Language specification (Đặc tả ngôn ngữ).

Cài đặt AngularJS

  1. Truy cập trang chủ: https://angularjs.org/
  2. Download phiên bản angularjs 1.7.5
  3. Tạo file index.html ví dụ đầu tiên sử dụng AngularJS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ví dụ đầu tiên AngularJS</title>

    <!-- Include script angularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <p>Tên khách hàng: <input type="text" ng-model="name"></p>
        <p ng-bind="name"></p>
    </div>
</body>
</html>

AngularJS là một JavaScript Framework

AngularJS là một JavaScript framework. Code được viết bằng ngôn ngữ JavaScript. AngularJS rất gọn nhẹ, có thể include vào bất kỳ file HTML nào bằng thẻ <script></script> thông thường.

Cú pháp sử dụng AngularJS

AngularJS cung cấp tính năng mở rộng các thành phần HTML

AngularJS cung cấp tính năng cho phép mở rộng HTML with Tiền chỉ lệnh (ng-derectives) Tiền chỉ lệnh ng-app directive định nghĩa một chương trình sử dụng AngularJS. Tiền chỉ lệnh ng-model directive sẽ gắn kết dữ liệu (bind data) giữa các thành phần HTML controls (input, select, textarea) với data của chương trình (từ model hoặc controller truyền qua). Tiền chỉ lệnh ng-bind directive có nhiệm vụ gắn dữ liệu từ chương trình (application data) đến các thành phần của HTML. Lưu ý: chúng ta có thể sử dụng dạng tiền chỉ lệnh data-ng-*, thay vì ng-*, nếu muốn file HTML của mình khi check trên web là hợp lệ.

Biểu thức sử dụng trong AngularJS (expression)

AngularJS expressions sẽ được sử dụng trong cú pháp sau: {{ expression }}. AngularJS sẽ tự tính toán biểu thức và hiển thị kết quả ra màn hình. Bổ sung vào ví dụ trên phần nhập số lượng, đơn giá, biểu thức tính thành tiền như sau: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ví dụ đầu tiên AngularJS</title>

    <!-- Include script angularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="quantity=2;price=2500">
        <p>Tên khách hàng: <input type="text" ng-model="name"></p>
        <p ng-bind="name"></p>

        Số lượng: <input type="number" ng-model="quantity"><br />
        Giá tiền: <input type="number" ng-model="price"><br />
        Tổng cộng: {{ quantity * price }}
    </div>
</body>
</html>