Giới thiệu AngularJS

Giới thiệu AngularJS giúp bạn hiểu tổng quan về 1 framework quan trọng trong lập trình front end cho web: Đây là framework cần phải biết ngoài jquery.

1. Giới Thiệu về AngularJS

a. Giới thiệu tổng quan về AngularJS

  • AngularJS là một Framework được xây dựng trên nền tảng JavaScript.
  • AngularJS hoạt động dựa trên việc bổ sung thêm các thuộc tính (attribute) cho các tag của HTML.
  • AngularJS rất mạnh trong lập trình giao diện phía client và tổ chức ứng dụng web Single Page Application (SPA).
  • AngularJS rất phổ biến, được rất nhiều lập trình viên ưa chuộng và sử dụng trong các project.
  • AngularJS hoạt động uyển chuyển với các trình duyệt khác nhau.
  • Angular được Google release năm 2010.
  • Angular có 2 dòng phiên bản phát triển hoàn toàn khác nhau: Angular 1.x và Angular 2,3,4,5,6,7,8.  Angular 1.x có tên chính thức là AngularJS – là một kỹ năng buộc phải có hiện nay. Hầu hết các dự án hiện nay đều chọn AngularJS vì dễ học, dễ làm.  Từ các phiên bản 2 trở đi có tên chính thức là Angular.
  • AngularJS biến HTML tĩnh thành HTML động. Nó mở rộng khả năng của HTML bằng cách thêm các thuộc tính, thành phần dựng sẵn và cung cấp khả năng tạo các thuộc tính tùy chỉnh bằng cách sử dụng JavaScript.

b. Lịch sử AngularJS & Angular

Version 1: Phiên bản 1 có tên chính thức là AngularJS, hiện tại vẫn đang được phát triển. Ngày 11. tháng 3 năm 2019 phiên bản 1.7.8 được phát hành. Website chính là https://angularjs.org/.  và đây là các mốc thời gian:

Version Release Date (dd/MM/yyyy)
1.7.8 11/3/2019
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

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)
8.0.0 28/5/2019
7.0.0 12/2018
6.0.0 05/2018
5.0.0 2017
4.0.0 2016
2.0.0 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.

c. Các Thành Phần Của AngularJS

angularjs-comppnents
  • Data-binding: tự động đồng bộ dữ liệu giữa model và view.
  • Scope: là cầu nối giữa controller và view. Scope được sắp xếp theo cấu trúc DOM của ứng dụng. Nó có thể xem biểu thức và truyền các sự kiện.
  • Controller: là tính năng của AngularJS giới hạn tới một scope cụ thể.
  • Model View Whatever: AngularJS không hoàn toàn triển khai theo MVC mà gắn liền với Model-View-ViewModel – mô hình hỗ trợ ràng buộc dữ liệu 2 chiều giữa view và viewmodel (viewmodel là lớp trung gian giữa view và model, được xem như controller trong mô hình MVC). Nhóm phát triển AngularJS đã đặt tên vui cho mô hình này là Model View Whatever.
  • Services: Trong các services AngularJS là các đối tượng singleton hoặc các hàm được sử dụng để thực hiện các nhiệm vụ cụ thể. Nó nắm giữ một số logic và chức năng có thể được gọi là bộ điều khiển, chỉ thị, bộ lọc.
  • Directives: là 1 chỉ thị (hay 1 lệnh) trong AngularJS, cung cấp 1 chức năng HTML mới.
  • Filters: là cách định dạng hiển thị dữ liệu.
  • Dependency Injection: giúp bạn tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra.

d. Ưu Và Nhược Điểm Của AngularJS

Ưu điểm

  • AngularJS cho phép tạo ra các ứng dụng một cách đơn giản với mã được tổ chức khoa học, rõ ràng.
  • AngularJS sử dụng data bind – liên kết dữ liệu với các thẻ HTML nên làm giảm thiểu mã lệnh đọc ghi dữ liệu.
  • AngularJS có thể chạy trên hầu hết các trình duyệt điện thoại thông minh.
  • Các thuộc tính tích hợp (các chỉ thị) làm cho dữ liệu trong tag HTML trở nên “động”.
  • Hỗ trợ ứng dụng đơn trang.
  • Hỗ trợ hai chiều ràng buộc dữ liệu.
  • Với AngularJS, lập trình viên sẽ viết ít code hơn, với nhiều chức năng hơn.

Nhược điểm

  • Chạy ở phía người dùng (chạy trong trình duyệt) nên nên các nghiệp vụ an toàn người dùng là không khả thi.
  • Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì ứng dụng không hoạt động được.
  • Hạn chế về SEO

2. Download và cài đặt

Download thư viện AngularJS: https://angularjs.org/

angularjs-download

Cài đặt (hay nhúng) AngularJS vào trang của bạn: 
<script src=”angular.min.js”></script>

3. Công cụ coding AngularJS

Bạn có thể dùng bất kỳ chương trình soạn thảo văn bản nào để viết mã Angular. Các chương trình sau đây thường được sử dụng vì hỗ trợ soạn HTML, CSS và JavaScript:

  • Notepad++
  • Visual Studio
  • Dreamweaver
  • SublimeText
  • NetBean
  • Eclipse

Và bạn cần có webserver trên local để thực hiện chức năng định tuyến và bao hàm

4. Một chương trình AngularJS và các thành phần cơ bản trong nó

Trong 1 trang web dùng AngularJS, bạn cần thực hiện các việc sau:

  1. Nhúng thư viện AngularJS
  2. Tạo 1 ứng dụng cho AngularJS.
    (Trong ví dụ, ứng dụng được tạo có tên là myapp )
  3. Khai báo ít nhất 1 vùng điều khiển (controller) để tương tác, tính toán, hiện dữ liệu thông qua 1 hàm khai báo. Trong phạm vi mỗi ứng dụng, có thể định nghĩa nhiều vùng controller. Ví dụ vùng tỷ giá, vùng giá vàng, vùng liệt kê số user online, vùng thông báo.
    (Trong ví dụ dưới, vùng được khai báo có tên là myctrl)
  4. Khai báo các hàm để gán, hiện dữ liệu cho từng vùng.
    (Trong ví dụ dưới là myfunc() )
  5. Khai báo các biểu thức sẽ hiển thị trong các tag html hoặc buộc (bind) dữ liệu vào các control của form…
    (Trong ví dụ dưới là {{welcome}})

a. Coding 1 chương trình AngularJS

Chương trình AngularJS đầu tiên

b. Giải thích các thành phần

<script src= “js/angular.min.js”>  
</script>    		Nhúng thư viện AngularJS vào trang.
@ng-app Định nghĩa 1 ứng dụng AngularJS với tên chỉ ra (mỗi ứng dụng có 1 tên). Mỗi trang chỉ tạo được 1 ứng dụng. ng-app là root element trong của ứng dụng Angular. Ng-app khai báo trong tag gì cũng được, không nhất thiết là tag body hay div. Tuy nhiên vì mỗi trang chỉ tạo được 1 ứng dụng nên thường chỉ định trong tag body luôn (để phạm vi ứng dụng là toàn trang)
@ng-controller Định nghĩa 1 vùng điều khiển với tên chỉ ra (mỗi vùng có 1 tên). Trong mỗi vùng này bạn có thể tạo nhiều biến. Các biến sẽ được gán giá trị qua 1 hàm do bạn tự định nghĩa. Nhiều vùng có thể trùng tên.
{{welcome}} Đó là biểu thức để hiện các giá trị. welcome là 1 biến trong đối tượng $scope
var app= angular.module (“myapp”,  []) Tạo instance ứng dụng AngularJS
app.controller(“myctrl”, myfunc); Khai báo rằng hàm myfunc để xử lý trong phạm vi của myctrl

c. Viết mã thu gọn

Bạn có thể viết mã AngularJS trong trang 1 cách gọn hơn như sau:

Chường trình AngularJS với code rút gọn

5. Buộc dữ liệu trong AngularJS

Buộc (binding) dữ liệu tức là gắn các biến hay biểu thức vào các tag hay vào các control trong form.
Mục đích của việc binding là để cho dữ liệu được hiển thị trong trang cho người dùng sử dụng.

a. Buộc dữ liệu biến/biểu thức

Như ví dụ chương trình đầu tiên:

b. Buộc dữ liệu đối tượng

Đối tượng trong AngularJS được đặt trong 2 dấu { } . Mỗi đối tượng có nhiều biến, ví dụ như đối tượng info bên dưới có 2 biến là fpoly và course.
Truy cập đến giá trị các biến trong đối tượng bằng cách ghi tênđtượng.tênbiến  (trong ví dụ dưới là info.fpoly)

Ví dụ 1:

angular-data-binding-object

$scope.info là một đối tượng gồm 2 thuộc tính: fpoly có giá trị là “FPT Polytechnic” và course có giá trị là “Welcome to AngularJS”

{{info.fpoly}} là biểu thức AngularJS nhằm hiển thị giá  trị thuộc tính fpoly của đối tượng $scope.info

Ví dụ 2:

angular-data-binding-object-2

c. Buộc dữ liệu mảng

Mảng (hay dãy) trong AngularJS được đặt trong 2 dấu [ ] . Trong mảng có nhiều giá trị được khai báo. Bạn có thể truy cập đến các giá trị trong mảng qua chỉ số của nó.

angular-data-binding-array
  • $scope.info là một mảng gồm 2 phần tử
  • {{info[0]}} biểu thức Angular nhằm hiển thị giá trị của phần tử đầu tiên của mảng $scope.info

d. Buộc dữ liệu với lệnh ng-bind và ng-model

angular-data-binding-model

AngularJS còn cho phép sử dụng các chỉ thị ng-bind và ng-model để buộc dữ liệu lên view.

@ng-bind : có tác dụng buộc dữ liệu vào nội dung của 1 tag HTML bất kỳ, khi dùng lệnh này thì ghi trong phần mở đầu của tag, còn nếu dùng cách tương đương {{ }} thì bạn ghi ở giữa tag ( <h1>{{welcome}}</h1>)

@ng-model: là lệnh dùng buộc dữ liệu vào các form control. Chỉ thị này được sử dụng để buộc dữ liệu 2 chiều, nghĩa là khi dữ liệu trên điều khiển thay đổi thì giá trị của thuộc tính trong $scope cũng bị thay đổi theo.

6. Sự kiện trong AngularJS

  • Sự kiện xảy ra khi user tương tác vào các tag trong trang hoặc do hệ thống phát sinh ra. Ví dụ: click, blur, focus, change, check, load,…
  • Các sự kiện này được điều khiển bằng mã script để thực hiện những việc tương ứng.

a. Khai báo sự kiện AngularJS

Sự kiện của AngularJS được khai báo và sử dụng giống như các sự kiện HTML thông thường.

Ví dụ 1: Khai báo sự kiện mousemove để tính toán biểu thức

Ví dụ 2: khai báo sự kiện mousemove và gọi phương thức (hàm) trong scope

angular-event-2

b. Các sự kiện trong AngularJS

Các sự kiện thường dùng

  • ng-blur
  • ng-focus
  • ng-change
  • ng-click
  • ng-dblclick
  • ng-submit

Các sự kiện liên quan đến phím

  • ng-keydown
  • ng-keypress
  • ng-keyup

Sự kiện liên quan đến chuột

  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup

Các sự kiện liên quan đến thao tác nội dung

  • ng-paste
  • ng-copy
  • ng-cut

c. Ví dụ xử lý sự kiện

angular-event-3
  • ng-model định nghĩa thuộc tính username trong $scope và buộc lên <input>
  • ng-click sự kiện click với phương thức trong $scope
  • Trong $scope này gồm 2 thuộc tính là username và greeting và 1 phương thức là sayHello()

7. Chỉ thị ng-repeat trong angularJS

Chỉ thị ng-repeat được sử dụng để lặp qua 1 mảng. Ví dụ ở trên là code để duyệt qua các phần tử trong mảng array

  • Cứ mỗi phần tử trong mảng sẽ tạo một thẻ <element> trong trang web
  • item là phần tử hiện tại
  • $index là biến chứa chỉ số của phần tử hiện tại trong mảng (tính từ 0)

Ví dụ 1: lặp qua 1 mảng 3 phần tử, mỗi lần lặp tạo ra tag p chứa chỉ số và phần tử hiện tại.

chi-thi-6
chi-thi-7

Ví dụ 2: lặp qua 1 mảng 3 đối tượng, mỗi lần lặp tạo ra tag tr chứa các giá trị của đối tượng hiện tại.

chi-thi-8
ng-repeat đặt trong tr để lặp và tạo nhiều hàng dữ liệu.

Khi lặp mỗi phần tử trong mảng, 1 tag tr sẽ được tạo ra thêm.

chi-thi-9

BÀI VIẾT LIÊN QUANXEM THÊM