Tìm hiểu AngularJS - Giới thiệu tổng quan (P1)

Bài đăng này đã không được cập nhật trong 9 năm

1. Khái niệm

AngularJS là một JavaScript framwork được phát triển bởi Google, nó là mã nguồn mở và hoàn toàn miễn phí chính vì thế có rất nhiều tài liệu cũng như hướng dẫn cho việc tìm hiểu AngularJS. Trong loạt bài này mình sẽ tổng hợp lại những kiến thức cơ bản nhất về AngularJS để các bạn tiện theo dõi và cùng nhau tìm hiểu những điều hay ho của AngularJS, lý do tại sao nó trở nên phổ biến như hiện nay.
Trước khi tìm hiểu AngularJS mình đã được khuyến cáo cần có những kiến thức cơ bản nhất về html, css, Javascript,.. rồi mới bắt đầu. Nếu đây là lần đầu bạn làm quen với web, với javascript thì nên dừng lại ở đây và ngâm cứu javascript căn bản rồi quay lại nhé. Còn nếu bạn đã làm web lâu năm, có những hiểu biết nhất định về javascript thì còn chần chừ gì nữa, chúng ta bắt đầu thôi.
AngularJS là framwork dành cho xây dựng ứng dụng web động, hoạt động theo mô hình MVC, nó cho phép bạn sử dụng HTML như là template và thêm vào các thuộc tính mở rộng HTML theo quy tắc của AngularJS để diễn tả các thành phần của ứng dụng một cách rõ ràng và ngắn gọn.
Các khái niệm chính của AugularJS:

Khái niệm	Mô tả
Template	Sử dụng ngôn ngữ HTML
Directives	Cho phép mở rộng HTML và bạn có thể custom lại các thuộc tính, phần tử (elements)
Model	Lưu trữ dữ liệu và hiển thị ra ngoài view của người dùng khi có 1 tương tác nào đó
Scope	Điểm trung gian, làm nhiệm vụ giao tiếp giữa model, controller, service, view,..
Expressions	Truy cập vào các biến và function từ scope
Compiler	parses template and khởi tạo directives và expressions
Filter	Bộ lọc, format lại dữ liệu hiển thị ra ngoài view người dùng
View	Những gì người dùng có thể thấy được
Data Binding	chuyển đổi dữ liệu giữa model và view
Controller	Lớp business logic phía sau views
Dependency Injection	Tạo, liên kết, thống nhất các đối tượng và chức năng
Injector	Chứa dependency injection
Module	Cũng giống như các framework khác, module như thùng chứa các thứ như là controller, service, directives,…
Service	Xây dựng service, mục đích là tái sử dụng lại các phương thức chung có thể sử dụng ở nhiều view hay controller khác nhau

Trên đây mình chỉ giới thiệu qua về tất cả bộ phận của AngularJS để hiểu sâu hơn từng khái niệm ta sẽ cùng nhau tìm hiểu trong những phần sau nhé.

2. Lịch sử

Được phát triển từ năm 2009 bởi Miško Hevery, nhân viên của Google. Trong khi đang tham gia một dự án khác Miško Hevery cùng nhóm đã rút ngắn số dòng code front-end từ 17000 dòng xuống chỉ còn khoảng 1500 dòng với AngularJS.
Phiên bản 1.0 được dưa ra vào tháng 6 năm 2012. Và cho đến thời điểm hiện tại (khi viết bài này) phiên bản đã là 1.3.15.
Mục đích thiết kế AngularJS hướng tới:
- Rút ngắn số dòng code, tổ chức source code tốt hơn.
- Tách riêng phần xử lý ở client của ứng dụng ra khỏi phần xử lý phía serve. Điều này cho phép việc phát triển diễn ra song song và cho phép tái sử dụng ở cả hai phía.
- Tách các thao tác với DOM ra khỏi application logic. Cải thiện khả năng test của mã nguồn.

3. Ưu điểm và nhược điểm

Ưu điểm:
- AngularJS được phát triển bởi google, và là mã nguồn mở viết theo mô hình MVC.
- AngularJS cho phép tạo ra các ứng dụng một cách đơn giản, code sạch, dễ dàng hơn trong việc kiểm thử.
- Tương thích với hầu hết các trình duyệt trên các điện thoại thông minh.
- AngularJS sử dụng cơ chế data-binding tức là khi model thay đổi thì view cũng thay đổi theo và ngược lại.
Nhược điểm:
- Không an toàn: Được phát triển từ javascript nên nó không an toàn, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru.
- Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì coi vứt đi.

4. Download và cài đặt

Để download bạn lên trang chủ AngularJS bấm vào nút mầu xanh để download file angulajs.min.js phiên bản mới nhất về (đây chính là bộ thư viện của AngularJS) và include vào phần header:

<script src="/js/angularjs.min.js"></script>

Hoặc bạn cũng có thể copy CDN sau khi bấm vào download từ trang chủ và gọi:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

5. Ví dụ đầu tiên


<!DOCTYPE html>
<html>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <body>
        <div ng-app="">
            <p>Input something in the input box:</p>
            <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
            <h1>Hello {{name}}</h1>
        </div>
    </body>

</html>

Bạn có thể xem demo ví dụ này tại đây.

Qua ví dụ trên bạn thấy một số atributes đã được add thêm vào file HTML thuần, đây chính là các components chính của AngularJS được thêm vào:

ng-app: định nghĩa này chỉ thị một kết nối ứng dụng Angular JS tới HTML
ng-model: chỉ thị này liên kết với dữ liệu của ứng dụng Angular
ng-bind: chỉ thị này dùng đưa dữ liệu vào HTML tags
.....

Đây chỉ là ba components chính của AngularJS ngoài ra còn rất nhiều nhưng ta sẽ tìm hiểu dần qua các bài sau nhé.

6. Kết luận và tham khảo

Bài đầu tiên này mình mới chỉ dừng lại ở mức giới thiệu, nặng về các khái niệm, nhưng các bạn đừng vội chán nhé, ở bài tới chúng ta sẽ bắt tay vào mổ xẻ ví dụ trên và cùng tìm hiểu sâu hơn AngularJS Expressions.
Dưới đây là một số nguồn mà mình đã tham khảo trong quá trình tìm hiểu AngularJS, các bạn có thể xem qua để có cái nhìn tổng quan hơn về framwork JS này.

Rất mong nhận được sự đóng góp ý kiến của các bạn để bài viết sau của mình được tốt hơn.