Get Started. It's Free
or sign up with your email address
Angular by Mind Map: Angular

1. cách tạo mới, thêm package & chạy 1 ứng dụng angular

1.1. create new project: ng new project-name

1.2. Run project: ng serve --o --port port-to-run

1.3. install package: npm i pakage-name -s

2. cách cài đặt

2.1. install node js

2.1.1. sudo apt-get install nodejs

2.2. install npm

2.3. install tsc

2.3.1. npm install -g typescript

2.4. install angular cli

2.4.1. npm install -g @angular/cli

3. Router

3.1. Là 1 module

3.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: ... }

3.3. Sử dụng cli để tạo router: ng generate module app-routing --flat --module=app

3.4. Route child

3.4.1. hiển thị trong template của route cha

3.5. Guard

3.5.1. CanActivate: Quyết định việc một route được kich hoạt.

3.5.2. CanActivateChild: Quyết định việc children routes được kich hoạt

3.5.3. CanDeactivate: Quyết định việc một route hủy kích hoạt

3.5.4. CanLoad: Quyết định một module được lazy loading

3.6. gọi đến route bằng routeLink

3.6.1. ví dụ: <a routeLink ="route-url" >test</a>

4. component

4.1. tạo mới component: ng generate component component-name ng g c component-name

4.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

4.3. component = template( .html, .css) + component class ( property + method .ts) + metadata (@component .ts chưa templateUrl & styleUrls )

4.4. component cycle: Create -> render -> render child component -> change -> destroy

4.5. component con -> truyền dữ liệu sang component cha = @output thông qua EventEmitter

4.6. component cha truyền sang component con = @input

4.7. @ViewChild

5. module

5.1. ng g m module-name

5.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 đó.

5.3. Module gốc: AppModule phải import BrowserModule

5.4. Module chức năng: phải import CommonModule

6. binding data

6.1. (event-binding): truyền dữ liệu từ template sang component theo các sự kiện

6.2. [property-binding]: truyền dữ liệu từ component sang template

6.3. 2-way binding: tự động truyền dữ liệu 2 chiều giữa component và template thông qua ng-model

7. Angular là gì ?

7.1. là 1 javascript framework để viết front-end, phát triển bởi Google, được viết bằng typescript

8. Typescript

8.1. là 1 superset của javascript

8.2. được phát triển bởi microsoft

8.3. sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6)

8.4. Kiểu dữ liệu

8.4.1. Number

8.4.2. Boolean

8.4.3. String

8.4.4. Array

8.4.5. Tuple

8.4.6. Enum

8.4.7. Any

8.4.8. void

8.4.9. Null

8.4.10. Undefined

8.4.11. Interface

9. cơ bản về UI/UX

9.1. UI: user interface giao diện người dùng

9.2. UX: user experencie trải nghiệm người dùng

9.3. các mẫu thiết kế phổ biến: + chữ F + zigzac + tam giác vàng

10. Service / DI

10.1. ng g s service-name

10.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ì

10.3. Service được tiêm vào component thông qua cơ chế Dependency injection

10.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

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. Kết nối back-end

12.1. Kết nối thông qua API

12.2. Sử dụng HttpClientModule

12.3. sử dụng các phương thức

12.3.1. get

12.3.2. post

12.3.3. put/patch

12.3.4. delete

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