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ếnThê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()"