Please enable JavaScript.
Coggle requires JavaScript to display documents.
Sơ Đồ Tư Duy Tuần 1 (Module 5) - Coggle Diagram
Sơ Đồ Tư Duy Tuần 1 (Module 5)
Typescript
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
Angular Component & Template
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
Components Interaction
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ư:
Dùng Template Validator
Dùng
View
Child
Dùng
Output
Bước 1: Khai báo
Output
là 1 sự kiện Emiter phát sinh trên Compent cha
Bước 2: Sử dụng EventEmitter để ném giá trị cho Componet cha
Bước 3: Component cha phải sử dụng EvenBinding để nhận giá trị ném ra tại selector của Component Con
Angular Overview
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