1. component
1.1. tạo mới component: ng generate component component-name ng g c component-name
1.2. là các khối tạo lên ứng dụng, thành lập bởi ít nhất 1 code html
1.3. component = template( .html, .css) + component class ( property + method .ts) + metadata (@component .ts chưa templateUrl & styleUrls )
1.4. component cycle: Create -> render -> render child component -> change -> destroy
1.5. component con -> truyền dữ liệu sang component cha = @output thông qua EventEmitter
1.6. component cha truyền sang component con = @input
1.7. @ViewChild
2. binding data
2.1. (event-binding): truyền dữ liệu từ template sang component theo các sự kiện
2.2. [property-binding]: truyền dữ liệu từ component sang template
2.3. 2-way binding: tự động truyền dữ liệu 2 chiều giữa component và template thông qua ng-model
3. Angular là gì ?
3.1. là 1 javascript framework để viết front-end, phát triển bởi Google, được viết bằng typescript
4. cơ bản về UI/UX
4.1. UI: user interface giao diện người dùng
4.2. UX: user experencie trải nghiệm người dùng
4.3. các mẫu thiết kế phổ biến: + chữ F + zigzac + tam giác vàng
5. Typescript
5.1. là 1 superset của javascript
5.2. được phát triển bởi microsoft
5.3. sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6)
5.4. Kiểu dữ liệu
5.4.1. Number
5.4.2. Boolean
5.4.3. String
5.4.4. Array
5.4.5. Tuple
5.4.6. Enum
5.4.7. Any
5.4.8. void
5.4.9. Null
5.4.10. Undefined
5.4.11. Interface
6. Kết nối back-end
6.1. Kết nối thông qua API
6.2. Sử dụng HttpClientModule
6.3. sử dụng các phương thức
6.3.1. get
6.3.2. post
6.3.3. put/patch
6.3.4. delete
7. cách cài đặt
7.1. install node js
7.1.1. sudo apt-get install nodejs
7.2. install npm
7.3. install tsc
7.3.1. npm install -g typescript
7.4. install angular cli
7.4.1. npm install -g @angular/cli
8. cách tạo mới, thêm package & chạy 1 ứng dụng angular
8.1. create new project: ng new project-name
8.2. Run project: ng serve --o --port port-to-run
8.3. install package: npm i pakage-name -s
9. module
9.1. ng g m module-name
9.2. Module là cách chia nhỏ các thành phần ứng dụng giúp dễ quản lí và nâng cấp ứng dụng. Angular sử dụng đến decorator có tên là @NgModule để khai báo, Module là một lớp chứa các thành phần để thực hiện các chức năng nào đó.
9.3. Module gốc: AppModule phải import BrowserModule
9.4. Module chức năng: phải import CommonModule
10. Router
10.1. Là 1 module
10.2. thêm mới route trong routing-app.module.ts cú phát cơ bản khai báo route: { path: 'url', component: ComponentName, children: [ {route children} ], guard: ... }
10.3. Sử dụng cli để tạo router: ng generate module app-routing --flat --module=app
10.4. Route child
10.4.1. hiển thị trong template của route cha
10.5. Guard
10.5.1. CanActivate: Quyết định việc một route được kich hoạt.
10.5.2. CanActivateChild: Quyết định việc children routes được kich hoạt
10.5.3. CanDeactivate: Quyết định việc một route hủy kích hoạt
10.5.4. CanLoad: Quyết định một module được lazy loading
10.6. gọi đến route bằng routeLink
10.6.1. ví dụ: <a routeLink ="route-url" >test</a>
11. Angular form
11.1. Tempalte-Driven Form
11.1.1. Sử dụng tạo ra những dạng form đơn giản
11.2. Reactive Form
11.2.1. Sử dụng khi tạo những form phức tạp
11.2.1.1. FormGroup
11.2.1.2. FormBulider
11.2.1.3. FormControl
11.2.1.4. FormArray
11.3. Validator
11.4. ngSubmit
12. Service / DI
12.1. ng g s service-name
12.2. Service chứa các code logic, dễ tái sử dụng ở các nơi khác nhau & dễ bảo trì
12.3. Service được tiêm vào component thông qua cơ chế Dependency injection
12.4. DI giúp giảm thiểu việc lặp code, không phải khởi tạo lại đối tượng ở nhiều nơi, dễ mở dụng ứng dụng & bảo trì ứng dụng
13. Directive
13.1. Đưa ra các chỉ thị để Angular chuyển đổi các template thành DOM
13.2. Component Directive
13.2.1. có 1 class khai báo selector, cách hoạt động, xử lý của component.
13.3. Structural directive
13.3.1. ví dụ: *ngIf và *ngFor
13.4. Attribute directive
13.4.1. Attribute directive là các directive được sử dụng như một thuộc tính của thẻ HTML vậy