1. Angular Form
1.1. Template driven form
1.1.1. B1: input form module B2 : NgForm -> Khai báo form B3 : [(NgModel)] -> binding hoặc sử dụng trường name
1.2. Reactive Form
1.2.1. B1: import reactive form module B2 : Khai báo form ở file ts với các form group
1.3. so sánh giữa 2 form
1.3.1. template : import form module khởi tạo form ở html không cần validate phức tạp
1.3.2. reactive form : import reactive module khởi tạo ở ts validate
2. Angular Service và Router
2.1. Service
2.1.1. Khái niệm : là những phần code được sử dụng lại giữa nhiều component khác nhau và angular phân tách các component từ các service để tăng tính module hóa để dễ tái sử dụng => giúp các class trở nên ngắn gọn hơn và mang đến hiểu quả cao hơn
2.1.2. Ng g s tên_service
2.2. Router
2.2.1. Khái niệm : là đối tượng giúp chúng ta xác nhận các component, component nào sẽ được thực hiện trên trang wb
2.2.2. Cách truyền và nhận tham số trên url : khai báo [router-link] :/ url param config ở file app-routing sd đối tượng active router, parâmp subcrible
2.2.3. cách sử dụng : Muốn sử dụng router thì cần 1 file app-routing-module
2.2.3.1. cú pháp : ng g module app-routing-module --flat = app với -- flat đặt tệp vào srrc app -module= app : dky app module
3. Backend conect
3.1. API
3.1.1. Khái niệm : API là application programing interface là 1 hệ thống máy tính hay ứng dụng cung cấp cho phép các yêu cầu idjch vụ (từ 1 máy tính hay ứng dụng khác ) truy cập đến nó và cho phép 2 bên trao đổi dữ liệu với nhau
3.1.2. Http Client Module : là 1 ngModule cho phép angular giao tiếp với api
3.2. Observable
3.2.1. Khái niệm : là một đại diện về 1 tập hợp giá trị hoặc các sự kiện trong tương lai. Hoặc các giá trị hoặc sự kiện phát sinh trong tương lai. Khai các giá trị hoặc sự kiện phát sinh trong tương lai -> observable sẽ đieièu phối -> obser
3.2.1.1. Obsever
3.2.1.1.1. Next : nhận giá trị trả về và trạng thái http status là 2xx
3.2.1.1.2. Error : Nhận lỗi hoặc giá trị trả về kèm trạng thái http stt 4xx, 5xx
3.2.1.1.3. Complete finally : dù next hay error thì complete luôn được gọi
3.3. So sánh giữa promise và observable
3.3.1. Observable
3.3.1.1. Khả năng hủy request
3.3.1.2. Khả năng retry lại request
3.3.1.3. Khả năng xử lý kết quả trước khi trả về
3.3.1.4. Khả năng trả về nhiều kết quả
3.3.2. Promise
3.3.2.1. Không có bất cứ thứ gì ở trên
4. Angular Overview
4.1. K/n : angular là một js framework dùng để thiết kế giao diện web. Được phát triển bởi google
4.1.1. Angular Js
4.1.2. Angular V2
4.2. Ưu điểm
4.2.1. Giúp phát triển một ứng dụng trang web đơn (single-page application )
4.2.2. Tăng tốc độ phát triển ứng dụng web
4.2.3. Cộng đồng người dùng lớn
4.3. Nhược điểm
4.3.1. Vì được viết bằng js nên người dùng có thể tắt đi js
4.4. Kiến trúc của angular
4.4.1. Module: tập hợp các chức năng của một ứng dụng
4.4.2. Component: 1 trang web được chia thành nhiều khối -> hiển thị riêng và được quản lý nghiêm ngặt, có một code bussiness xử lý riêng
4.4.2.1. Thành phần của 1 component
4.4.2.1.1. template : thành phần tạo ra giao diện (view) mà người dùng thấy được (được viết bằng file HTML )
4.4.2.1.2. Class : thuộc tính và phương thức là nơi xử lý logic và business, xử lý data cho các template
4.4.2.1.3. Meta
4.4.3. Service and DI: Trung gian xử lý trong các component giữa FE và BE
4.5. Angular CLI
4.5.1. khái niệm : command line interface là một công cụ khởi tạo dự án, kiểm thử và deploy
4.5.2. các lệnh
4.5.2.1. cài đặt : ng new ten_du_an
4.5.2.2. chạy ứng dụng : ng s (--o)
4.5.2.3. tạo component : ng c ten-component
4.6. Data Binding
4.6.1. Khái niệm : là kỹ thuật hỗ trợ đồng bộ dữ liệu, tương tác trong component và view của nó và bao gồm 2 loại
4.6.1.1. One way binding
4.6.1.1.1. intepolation {{}} (ts -> html)
4.6.1.1.2. property : (properties) ts -> html
4.6.1.1.3. event bind : (event) html -> ts
4.6.1.2. Two way binding
4.6.1.2.1. [(ngModel)]
5. Component và template
5.1. directive
5.1.1. khái niệm : directive là thành phần mở rộng cho html , các thuộc tính của thẻ html do angular định nghĩa thêm để thực hiện các hành động crud trên các component
5.1.2. phân loại
5.1.2.1. Structural
5.1.2.1.1. *NgFor
5.1.2.1.2. *NgIF
5.1.2.1.3. *[NgSwitch]
5.1.2.2. Attribute
5.1.2.2.1. [NgClass] : Thêm or xóa 1 hay nhiều class
5.1.2.2.2. [NgStyle] : thêm or xóa 1 hay nhiều css style
5.1.2.3. Component
5.1.2.3.1. Là các compoent do người dùng tạo nên
5.1.2.4. Custom directive
5.1.2.4.1. Là directive do người dùng tạo nên
5.2. Truyền dữ liệu
5.2.1. Từ cha sang con
5.2.1.1. @Input và import từ angular/core
5.2.1.2. Cú pháp goj từ template của cha
5.2.1.3. ["Tên biến"] = "....."
5.2.2. Từ con sang cha
5.2.2.1. @output: import từ angular/cli
5.2.2.2. Emiter
5.2.2.3. cú pháp tên biến : (tên_biến) = ...
5.3. Vòng đời của component
5.3.1. NgOnchanges : được gọi khi component dược thiệt lập các giá trị đầu vào bằng phương pháp properties. Điển hình khi triện từ cha sang con @Input
5.3.2. NgOninit : Được gọi khi component được khởi tạo lần đầu tiên, sau constructor và NgOnchanges và lưu ý ngOninit được chỉ tự động gọi duy nhất 1 lần trong vòng đời của nó
5.3.3. NgOnDoCheck: Được gọi khi phát hiện sự thay đổi của component
5.3.3.1. AfterContentInit : Được gọi khi component khởi tạo thành công
5.3.3.2. AfterContentChecked : Sai khi khởi tạo component thành công và được kiểm tra nội dung bởi angular change's module -> sự kiện sau sẽ được gọi
5.3.3.3. ngAfterViewIinit : sau khi angular khởi tạo các view của component và các view con mà directive được đưa vào -> chỉ tự động gọi 1 lần sau AfterContentChecked
5.3.3.4. afterViewChecked : thực thi sau khi kiểm tra các component và view con sau khi được directive đưa vào
5.3.4. ngOnDestryoy sự kiện này sẽ được gọi trước khi compoent phá hủy directive / component