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. Typescript
4.1. là 1 superset của javascript
4.2. được phát triển bởi microsoft
4.3. sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6)
4.4. Kiểu dữ liệu
4.4.1. Number
4.4.2. Boolean
4.4.3. String
4.4.4. Array
4.4.5. Tuple
4.4.6. Enum
4.4.7. Any
4.4.8. void
4.4.9. Null
4.4.10. Undefined
4.4.11. Interface
5. cơ bản về UI/UX
5.1. UI: user interface giao diện người dùng
5.2. UX: user experencie trải nghiệm người dùng
5.3. các mẫu thiết kế phổ biến: + chữ F + zigzac + tam giác vàng
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 tạo mới, thêm package & chạy 1 ứng dụng angular
7.1. create new project: ng new project-name
7.2. Run project: ng serve --o --port port-to-run
7.3. install package: npm i pakage-name -s
8. cách cài đặt
8.1. install node js
8.1.1. sudo apt-get install nodejs
8.2. install npm
8.3. install tsc
8.3.1. npm install -g typescript
8.4. install angular cli
8.4.1. npm install -g @angular/cli
9. Router
9.1. Là 1 module
9.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: ... }
9.3. Sử dụng cli để tạo router: ng generate module app-routing --flat --module=app
9.4. Route child
9.4.1. hiển thị trong template của route cha
9.5. Guard
9.5.1. CanActivate: Quyết định việc một route được kich hoạt.
9.5.2. CanActivateChild: Quyết định việc children routes được kich hoạt
9.5.3. CanDeactivate: Quyết định việc một route hủy kích hoạt
9.5.4. CanLoad: Quyết định một module được lazy loading
9.6. gọi đến route bằng routeLink
9.6.1. ví dụ: <a routeLink ="route-url" >test</a>
10. module
10.1. ng g m module-name
10.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 đó.
10.3. Module gốc: AppModule phải import BrowserModule
10.4. Module chức năng: phải import CommonModule
11. Service / DI
11.1. ng g s service-name
11.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ì
11.3. Service được tiêm vào component thông qua cơ chế Dependency injection
11.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
12. Angular form
12.1. Tempalte-Driven Form
12.1.1. Sử dụng tạo ra những dạng form đơn giản
12.2. Reactive Form
12.2.1. Sử dụng khi tạo những form phức tạp
12.2.1.1. FormGroup
12.2.1.2. FormBulider
12.2.1.3. FormControl
12.2.1.4. FormArray
12.3. Validator
12.4. ngSubmit
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