1. SS6. Angular form
1.1. có 2 loại
1.1.1. template driven form
1.1.2. reactive form( model driven form)
1.2. phân biệt
1.2.1. nơi khởi tạo: template và class
1.2.2. import: FormsModule và ReactiveFormsModule
1.2.3. đồng bộ: async và sync
1.3. custom validate
1.3.1. tự định nghĩa hàm ở class component theo quy tắc
1.3.1.1. input: tham số là AbstracControl
1.3.1.2. ouput:
1.3.1.2.1. true: trả về null
1.3.1.2.2. false: trả về đối tượng
2. SS7. Angular Router
2.1. service
2.1.1. mục đích
2.1.1.1. call API.
2.1.1.2. tái sử dụng code, hạn chế việc lặp đi lặp lại nhiều lần.
2.1.1.3. chuyển dữ liệu giữa các component cùng (ngang) cấp.
2.1.2. cách tạo
2.1.2.1. ng g s name(service)
2.2. router
2.2.1. mục đích
2.2.1.1. dùng để thay đổi nội dung của <router-outlet> dựa trên template component, tùy thuộc vào URL hiện tại.
2.2.2. cách config
2.2.2.1. tạo file Routing, sau đó định nghĩa mảng Router {path: , component: }.
2.2.2.2. đăng ký mảng Routes vào file Routing.
2.2.2.3. đăng ký file Routing vào appModule.
2.2.2.4. sử dụng <router-oulet> để cập nhật nội dung theo URL.
3. SS9. Connect backend
3.1. HttpClilentModule
3.1.1. Định nghĩa
3.1.1.1. là 1 module dùng để hổ trợ HttpClient trong việc connect đến webservice.
3.1.2. Có 5 phương thức
3.1.2.1. Get
3.1.2.2. Post
3.1.2.3. Patch
3.1.2.4. Put
3.1.2.5. Delete
3.2. Tạo API ảo
3.2.1. npm i json-server
3.2.2. json-server --watch name-flie.json
3.3. Observable
3.4. So sánh observable và promise
4. SS8. Module & DI
4.1. Module
4.1.1. phân chia projec rõ ràng
4.1.2. mỗi module sẽ đại diện cho một chắc năng của đối tượng (CRUD)
4.1.3. các thành phần
4.1.3.1. declaration
4.1.3.2. import
4.1.3.3. export
4.1.3.4. provider
4.1.3.5. bootstrap
4.1.4. cách tạo: ng g m name-module
4.2. DI (dependency injection
4.2.1. nhúng service vào các component hoặc nhúng service vào service khác
4.2.2. cách thực hiện
4.2.2.1. nhúng toàn bộ project: dùng providers:'root'
4.2.2.2. nhúng cho module: khai báo ở provider ở class module.
4.2.2.3. nhúng cho component
5. SS2. TypeScript
5.1. Định nghĩa
5.1.1. là bản nâng cấp của JavaScript, được phát triển bơi Microsoft.
5.2. Kiểu dữ liệu
5.2.1. Bao gồm tất cả kiểu dữ liệu của JS: number, string, boolean, null, undefined, symbol, object.
5.2.2. Và kiểu dữ liệu mới: interface, class, enum, any.
5.3. Đồng bộ và bất đồng bộ
5.3.1. Đồng bộ
5.3.1.1. Chương trình chạy theo thứ tự từ trên xuống dưới.
5.3.2. Bất đồng bộ
5.3.2.1. Một số đoạn chương trình "nhảy cóc", tức là chạy sau nhưng kết thúc trước và ngược lại.
5.4. Cơ chế xử lý bất đồng bộ
5.4.1. Callback (ECS5)
5.4.1.1. tức là hàm a gọi hàm b.
5.4.1.2. nhược điểm là dễ bị callback hell và gây khó đọc code.
5.4.2. Promise (ECS6) - nhược điểm là promise hell.
5.4.2.1. resolve
5.4.2.1.1. dùng để xử lý gửi trả kết quả khi thành công.
5.4.2.2. reject
5.4.2.2.1. dùng để xử lý khi thất bại.
5.4.2.3. then()
5.4.2.3.1. dùng để lắng nghe thành công, thất bại từ resolve và reject.
5.4.3. Async/Await (ECS7)
5.4.3.1. Bản chất giống với Promise, nhưng cải tiến hơn.
6. SS3. Angular Overview
6.1. Kiến trúc Angular
6.1.1. Chia thành nhiều module, một module sẽ bao gồm:
6.1.1.1. Component
6.1.1.1.1. hiển thị dữ liệu đến người dùng.
6.1.1.2. DI và Service
6.1.1.2.1. dùng để liên kết đến webservice và gửi dữ liệu sang component.
6.1.1.3. Directive
6.1.1.3.1. dùng để bổ trợ cho template component trong việc hiển thị dữ liệu.
6.2. Component
6.2.1. Định nghĩa
6.2.1.1. là thành phần ở trang web, hiển thị giao diện đến với người dùng.
6.2.2. Cách tạo
6.2.2.1. ng g c tên-component.
6.2.3. Các thành phần
6.2.3.1. Template
6.2.3.1.1. hiển thị giao diện đến với người dùng.
6.2.3.2. Class component
6.2.3.2.1. bao gồm thuộc tính và phương thức xử lý logic.
6.2.3.3. Metadata
6.2.3.3.1. @Component dùng để định nghĩa selector, đường dẫn HTML, CSS.
6.3. Databinding
6.3.1. One way binding
6.3.1.1. interpolation (hiển thị)
6.3.1.1.1. class -> template, kí hiệu {{}}.
6.3.1.2. property binding (thay đổi thuộc tính)
6.3.1.2.1. class -> template, kí hiệu [].
6.3.1.3. event binding (thay đổi dữ liệu)
6.3.1.3.1. template -> class, kí hiệu ().
6.3.2. Two way binding
6.3.2.1. template -> class thông qua [{ngModel}].
6.3.2.2. kết hợp giữ property và event binding.
7. SS4, SS5. Angular component
7.1. Truyền dữ liệu từ cha sang con
7.1.1. dùng decorator @Input.
7.1.2. được định nghĩa ở component con.
7.1.3. sử dụng property binding.
7.2. Truyền dữ liệu từ con sang cha
7.2.1. dùng decorator @Output + Event Emiter.
7.2.2. được định nghĩa ở component con.
7.2.3. sử dụng event binding.
7.3. Truyền dữ liệu giữa 2 conponent ngang hàng (sibling):
7.3.1. service.
7.3.2. rxjx subject, subscription.
7.4. Vòng đời component:
7.4.1. contructor()
7.4.1.1. không thuộc vòng đời của component.
7.4.1.2. được chạy đầu tiên khi component khởi tạo.
7.4.2. ngOnChange()
7.4.2.1. được chạy khi có dữ liệu truyền từ cha sang con (Input).
7.4.3. ngOnInit()
7.4.3.1. được chạy khi component được hiển thị lên web.
7.4.3.2. khởi tạo các dữ liệu ở component.
7.4.3.3. chỉ chạy một lần trong vòng đời.
7.4.4. ngDoCheck()
7.4.4.1. được chạy khi có sự thay đổi dữ liệu component.
7.4.5. ngDestroy()
7.4.5.1. được chạy khi component không còn hiển thị lên web nữa.
7.4.5.2. chỉ chạy một lần trong vòng đời.
7.5. Directive
7.5.1. định nghĩa
7.5.1.1. là thành phần dùng để tùy chỉnh template
7.5.2. có 4 loại
7.5.2.1. component directive
7.5.2.1.1. là các component
7.5.2.2. structural directive dùng để thay đổi cấu trúc.
7.5.2.2.1. *ngFor
7.5.2.2.2. *ngIf
7.5.2.2.3. *ngSwitch
7.5.2.3. atribute directive dùng để thay đổi màu sắc, định dạng
7.5.2.3.1. ngClass
7.5.2.3.2. ngStyle
7.5.2.4. custom directive do người dùng tạo ra
7.5.2.4.1. có thể xem là structural hoặc atribute.
7.6. Pipe
7.6.1. dùng để format lại dữ liệu trên màn hình và không làm thay đổi dữ liệu gốc.
7.6.2. có thể dùng trong class và template.
7.6.3. các loại pipe: uppercase, lowercase, titlecase, date, currence, slice, async, decimal, json,....