1. Lời nói đầu

Trong loạt bài về AngularJs này mình không đi quá nhiều vào khái niệm, lý thuyết, vì tất cả những điều này bạn có thể đọc tại ngay trang chủ của AngularJs, mà mình sẽ viết theo những gì mình hiểu và cố gắng làm thế nào để truyền đạt tới các bạn 1 cách đơn giản nhất, tốt nhất. Và nếu như những gì mình hiểu không đúng. Mời các bạn góp ý bên dưới đề mình học hỏi thêm. Thân 🙂

2. AngularJs là gì ?

Định nghĩa

AngularJs là một js framework dành xây đựng ứng dụng web động (dynamic web app).

Điều này có nghĩa là AngularJs cho phép chúng ta xây dựng 1 ứng dụng web bằng cách sử dụng framework được xây dựng trên nền tảng ngôn ngữ client là javascript. AngularJs là một framework thì cũng giống như các framework khác, ắt hẳn nó đã cung cấp các library, mô hình MVC, phương thức giúp ta phát triển một web app nhanh hơn.

Nhờ AngularJs, chúng ta sẽ viết code ít hơn, nhưng làm được nhiều hơn vì AngularJs đã xây dựng sẵn cho chúng ta nhiều thứ.

3.  Tổng quan nội dung của AngularJS

Nội dung 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 Liên kết, thống nhất các đối tượng và chức năng
Injector Giống như thùng chứa các biển thể độc lập (hơi khó hiểu, nhưng mà sẽ rõ hơn khi đụng tới :p)
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

Đã gọi là tổng quan thì cũng là lướt qua cho biết zậy thui. Chứ chưa hiểu được liền hết được đâu. Ắt hẳn là những bạn mới bắt đầu học thì sẽ có vô số điều khó hiểu và câu hỏi. Những đừng lo, rồi mọi thứ sẽ đâu lại vào đấy 🙂

4. Cài đặt AngularJS

Việc cài đặt AngularJs vô cùng đơn giản, đó là vào trang chủ của AngularJS https://angularjs.org/ , ấn vào nút Download màu xanh, một popup sẽ hiện ra. Trên popup này, các bạn copy link trong field CDN như sau :

Sau đó bạn sẽ gắn link này vào thẻ script

Cuối cùng đặt đoạn script này vào thẻ <head></head> hoặc <body></body> trong trang HTML của các bạn là xong, các bạn có thể bắt đầu sử dụng AngularJS được rồi.

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

Trước khi mình bắt đầu viết ví dụ Hello World đầu tiên trong AngularJs thì các bạn có thắc mắc là tại sao các ngôn ngữ lập trình thường chọn ví dụ Hello Word là demo đầu tiên không ? Nếu có thì mời các bạn xem qua bài này : Sự tích Hello Word (P/S xem cho zui, chứ đừng quá chú tâm vào nó nhé).

OK, vào ví dụ nào.

Các bạn tạo 1 file gọi là đuôi .html (ở đây mình đặt tên là bai1.html) và gõ nội dung như dưới đây.

Giải thích : 

– Trong thẻ <head></head> mình đã include thẻ <script> mà chúng ta đã tạo ra ở mục 4 để có thể sử dụng AngularJS

– Chúng ta sẽ có  1 div gọi là ng-app, đây chính là module cần có của 1 ứng dụng AngularJs ở mục số 3. Bạn BẮT BUỘC phải khởi tạo thuộc tính ng-app này trong div lớn nhất (hoặc có thể đặt trong thẻ body, html), bao bọc các element con để có thể sử dụng AngularJs bên trong thẻ này

– Chúng ta có 1 field text có thuộc tính là ng-model, điều này nói với AngularJS chúng ta sẽ sử dụng field text này là Model trong ứng dụng AngularJS

– Khi đã có model, ta sử dụng cặp dấu {{ tên model }} để hiển thị dữ liệu từ model ra ngoài view.

Giờ các bạn lưu trang bai1.html lại sẽ có giao diện đơn giản như sau:

angularjs hello world
angularjs hello world

mở bằng firefox hoặc chrome và gõ thông tin vào ô text và thấy kết quả là tên của bạn được hiển thị tự động ra ngoài giao diện. Điều này chính là cách thức data binding mà AngularJs framework đã xây dựng nhằm trung chuyển dữ liệu từ model ra ngoài view. Chúng ta sẽ tìm hiểu rõ hơn trong các bài kế tiếp.

6. Tổng kết

AngularJs khá đơn giản, nó cũng giống như jQuery, nếu bạn có biết cách sử dụng và làm chủ được nó bạn sẽ xây dựng được 1 web app dynamic nhanh chóng. Đây là bài viết đầu tiên giới thiệu sơ về AngularJs, vẫn còn nhiều thứ đang chờ đợi ở phía trước. Cùng nhau học nhé !

 

 

 

Gửi bình luận bằng Facebook

Bài viết liên quan: