Kinh nghiệm Angular

1. Kiến thức cơ bản

Gồm 3 thành phần chính:

• Module: đầu não
• Component: bộ phận
• + render UI
• + tương tác người dùng
• Services: truyền tải dữ liệu giữa các component

main.ts => bootstrapModule: Khởi động root module

@Component:

• Module:
• – declearations
• – imports
• – providers: khai báo services
• – bootstrap
• component
• – selectors: html tag để sử dụng component
• – templateUrl
• – tamplate: sử dụng cặp dấu “`” – bên trái số 1 viết code html tại đây luôn
• – syleUrls

Angular # AngularJS

TypeScript gồm các type:

• string
• number
• boolean
• any
• array
• null
• undefined
• void
• enum

Type Assertion:

• Chấm cái ra
• cast: chuyển biến sang kiểu khác nhưng không apply (không thay đổi kiểu)
• + (<string []>a)
• + (a as string[])

2. Những bước đi đầu tiên

2.1 Cài node js

Link download: https://nodejs.org/en/blog/release/v12.13.0/

//kiểm tra node
node --version

2.2 Cài Angular CLI

npm install glabal @angular/cli
//hoặc ngắn gọn
npm i g @angular/cli

//kiểm tra angular cli
ng --version

2.3 Tạo package

npm init --y

2.4 Cài Typescript

npm i -D typescript
//-d == --save-dev

2.5 Init tsc

npx tsc --init
  
 //chạy build ts => js
npx tsc

2.6 Cài project Angular

ng new tenDuAn
  //route => No
  // => css

2.7 Chạy dự án Angular

ng serve -o

2.8 Component

<tenComponent><schematics>.ts

schematics có thể là:

• module
• component
• services

2.8.1 Tạo component

ng generate component duongDan/TenComponet
//hoặc ngắn gọn
ng g c duongDan/TenComponet

2.9 Binding

2.9.1 Peoperty Bingding

component to template

Hiển thị giá trị biến

{{ tenBien }}

Đối với thuộc tính

src = "tenBien"
​
//hoặc
[src] = "tenBien"
  
//src có thể là các thuộc tính khác của element

style

[style.color] = "tenBien"
[style.background] = "tenBien"
  
//viết gọn
[ngStyle] = { color: tenBien, background: tenBien }
//có thể thay object phía sau thành một biến

Thêm class

[class.tenClass] = true/false;
/*
    true: có thêm class này
    false: không thêm class này
*/
​
//hoặc ngắn gọn
[ngClass] = { tenClass: true, tenClass: false }

2.9.2 Event Bingding

template to component

(tenSuKien) = "tenHam()"
  
(click) = "handleButtonClick()"