Sơ Đồ Tư Duy Tuần 1 (Module 5)
Typescript
Angular Component & Template
Components Interaction
Angular Overview
Giới thiệu tổng quan về TypeScript
- TS là super set của JS là ngôn ngữ lập trình do microsoft phát hành nhầm tăng cường cho JS trong các vấn đề về kiểu dữ liệu OOP(Genneric).
- TS sẽ được compile sang JS trước khi chạy trên trình duyệt hoặc máy chủ.
- TS được hỗ trợ mạnh từ TS->JS sử dụng câu lệnh "tsc ten_file.ts" trong terminal
- Cách run file JS trong mode.JS: node ten_file.js
Ưu điểm của TS
- Support rất nhiều tính nâng cao trong các bản ES mới nhất
- TS có một hệ thống type rất tốt, giúp người sử dụng có thể dễ dàng biết trước được các bug có thể phát sinh
- Dễ dàng để gợi ý code trong các IDE/Editor
- Một dạng self-documenting cho code tạo sự nhất quán trong coding style cho các team đông người
Các kiểu dữ liệu trong TS
- TS sẽ có tất cả dữ liệu của JS và bổ sung thêm một số dữ liệu mới: interface, any, enum,...
Bất đồng bộ, cách sử lí bất đồng bộ
- Đồng bộ
- Đồng bộ là cách xử lí code từ trên xuống dưới từ trái qua phải dòng lệnh phải dòng lệnh phía trên xử lí xong mới đến dòng lệnh phía dưới
- Bất đồng bộ và cách xử lí bất đồng bộ
a. Callback: Đây là cách xử lí theo phiên cũ của JS, dễ bị lỗi callback hell nên hiện tại không khuyến khích sử dụng.
b. Promise: Được giới thiệu trong bản ES6, giúp JS có thể xử lý được bất đồng bộ mà không bị callback hell
c. Asyn/Await: Được giới thiệu trong bản ES8
giúp sử dụng
Tổng quan về Angular
- Angular là JS framework xây dựng các ứng dụng front-end theo kĩ thuật SPA(Single Page Application)
- Angular được xây dựng dựa trên mô hình MVVM(mode->view->view model)
- Phiên bản đầu tiên của Angular có tên là AngularJS là phiên bản chạy hoàn toàn từ JS từ phiên bản Angular 2 trở lên Angular chạy nodeJS và ngôn ngữ TypeScript
- CÁC THÀNH PHẦN CỦA ANGULAR
- Các thành phần cốt lõi của Angular là component, xoay quanh component xây dựng giao diện là Directive, NgModule, injection, Service,...
Khái niệm Component
- Các ứng dụng xây dựng từ Angular là các component được ghép với nhau mỗi component sẽ có phần giao diện và xử lí nghiệp vụ riêng cho giao diện đó component có 3 phần chính
- Template: thành phần giao diện của Component(Có thể là file HTML hoặc 1 đoạn HTML)
- 1 file để xử lý nghiệp cho phần template
- Metadata: là thành phần khai báo cấu hình cho Component
- Cách tạo Component: ng g c ten_component
Vòng đời của Component
- Vòng đời của một component hay một directive trong Angular tính từ lúc nó được tạo ra, nó bị thay đổi và bị phá huỷ.
- NgOnChanges()
- NgDocheck()
- NgOnDestroy()
- NgOnInit()
Directive
- Là thành phần của Angular dùng để tăng cường sức mạnh cho HTML. Giúp lập trình viên có thể thay đổi cấu trúc thuộc tính của thẻ HTML
- Có 4 loại Directive:
- Component Directive: Mỗi loại component được xem là 1 Directive.
- Structural Directive: Là các Directive có thể thay đổi cấu trúc trang HTML như: NgFor,NgIf,...
- Attribute Directive: là các directive có thể thay đổi các thuộc tính của html như NgStyle,NgClass,...
- Custom Directive do lập trình viên tự định nghĩa
Pige
- Là thành phần trong angular giúp lập trình viên có thể format để hiện dữ liệu (lưu ý: Pige chỉ có tác dụng hiển thị chữ không thay đổi dữ liệu)
- Một số Pige thường gặp:
- UpperCasePige
- LowerCasePige
- TitleCase Pige
Cách truyền dữ liệu từ component cha sang component con
Để truyền dữ liệu từ component cha sang component con ta dùng decorator@Input() trong component con(được khai báo ngay biến nhận dữ liệu)
B1: Khai báo Input
B2: Tại selector của component con đang được nhúng trong component cha sử dụng cú pháp property binding [x] = "value"
x: biến của component con dùng để nhận dữ liệu
value: giá trị từ component cha truyền vào cho x
Lưu ý: với Input sẽ là truyền dữ liệu sẽ là tham trị với kiểu dữ liệu nguyên thủy và tham chiếu với kiểu đối tượng
Cách truyền dữ liệu từ component con sang component cha
Để truyền dữ liệu từ component con sang component cha ta có nhiểu cách như: