TIP SHARE DEVELOP

Explore

TIP - ANGULAR { Structure + Custom }❤️✅

Thái Nguyễn

Angular and things to learn❤️✅

- Infinitive and Virtual scroll

- Breakpoint and Resize Observer

- Content projection

- Dynamic loader component

- Standalone component

- Memory leak

- Design Patterns in Angular TIP - ANGULAR { Structure + Custom }❤️✅

{RxJS(subject), custom component}

~~~~~~

{A} Define ❤️___

declarations: This property tells about the Components, Directives and Pipes that belong to this module.

exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.

imports: Other modules whose exported classes are needed by component templates declared in this NgModule.

providers: Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.)

bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.

Differentiation between attribute & property::

Attribute: là thuộc tính của DOM, có dạng (caseup | case-up ~ không viết hoa)

Binding to the class ~ [class.attribute]=“input”, [class]=“[‘a’, ‘b’]”, [class]=“{foo: true, bar: false}”

Binding to the style:: [style]=“input ~ text;text”, single: [style.text]=‘value ~ text’

Property: là thuộc tính của {A}, nhận các biến trong ts được binding ra ngoài html (dạng caseUp)

—————————————————————————————————————

✅ Tối ưu hoá làm cho app chạy nhanh hơn

Đó là dùng lazy load của angular

~ Feature module: lazy load, khi mỗi 1 trang được mở thì app chỉ load module nào chứa component được tạo, những module khác không được gọi đến thì sẽ không được tạo

—————————————————————————————————————

*******STRUCTURE ❤️❤️❤️

—————————————————————————————————————

::{A} Data Binding❤️😘✅

~ Truyền dữ liệu kiểu input

+ [property binding] Dấu ngoặc vuông [] -> truyền vào là 1 biến return giá trị, nếu là kiểu string thì thêm ‘’ vào giá trị nếu ko muốn gửi nó qua biến

+ Nếu ko có dấu ngoặc, biến truyền vài sẽ render chuỗi string, ko phải giá trị của biến đó nữa.

Exam: [input]=‘variable’ when omitting the brackets -> input=“variable”, variable is string

Solution: input=“{{variable}}”

Note: input=“{{variable}}” không phải là attribute nhé!

—————————————————————————————————————

::Dependency Injection❤️😘✅

::Nội dung

~ Dependencies là dịch vụ / đối tượng mà 1 lớp cần thực hiện chức năng của nó.

~ Dependency injection (DI) là design patten, trong đó 1 lớp yc các phụ thuộc từ bên ngoài thay vì tạo ra chúng.

::Khi nào cần có DI

~ Dễ unitTest hơn

~ Để share service trong {A}

~ Chia nhỏ module, dễ quản lý

~ Đảm bảo các phần phân lập và ko thể can thiệp lẫn nhau

Tree Angular::

~ Có 2 phần riêng: Angular và DOM

~ Angular(node) một cơ chế khác

+ nó chia nhỏ từng (node)

+ Mỗi (node) là 1 DOM (html, thẻ <tag>), từ (node) sẽ render ra DOM

+ Vì sao ko nên dùng thao tác trên DOM, element: Vì theo {A} xuống với (node con) là 1 chiều, vậy nếu thao tác DOM, thì trong (node) sẽ vẫn còn lưu trữ đó

-> Do vậy, khi thao tác với DOM ta nên sd API mà {A} cung cấp: Renderer

Injector tree in {A}::

~ Ta sẽ có (AppRoot) là module cao nhất.

~ Bên dưới thì có những {module} nhỏ

~ Dưới {module} thì có những {comp}

~ Phân cấp, mỗi module hay comp đều có thể khai báo 1 DI (đều có 1 instance)

+ Nếu mà ko khai báo DI ở comp thì khi run, {A} sẽ tìm nó ở trên nó (module or AppRoot), nếu ko có thì báo lỗi.

+ Bài toán: sẽ có 1000 service được tạo và khai báo ở module, và bản thân comp / module sd 2 - 3 service thì …

+ Ở mỗi service sd (@Injectable({providedIn: 'root’} )) để khi gọi service trong constructor thì trên module sẽ render service đó (để sử dụng).

+ Nếu ko, bài toán sẽ phải load 1000 service ở module làm cho có nhiều code thừa.

Dependency Injection (DI)❤️…

+ Có ví dụ:: muốn tách phần xử lý business thành 1 class -> để giảm responsibility (nhiệm vụ) của Comp và tăng tính reuseable (tái sử dụng) của logic đó

…

-> DI Là 1 phần của bộ core {A}, có cơ chế giúp ta có thể nhúng service vào các component, hoặc với các service với nhau.

DI in Angular {A}

+ 3 phần chính:: Injector, Provider, Dependency

-> Cung cấp cho Injectors thông qua Providers

Phân tích::

Consumer: nơi mà nhúng service vào. vd: AppComponent.

Dependency: là những (object) service được nhúng vào {comp}, trong vd: ProductService.

DI Token: Là 1 dãy ký tự tượng trưng cho ID và là cách duy nhất khi service đăng ký là Dependency Injection.

Provider: quản lý ds các dependencies và token của nó, giống như một công thức để Injector biết cách để tạo một instance của phụ thuộc.

Injector: có trách nhiệm tạo đối tượng cung cấp service và inject (nhúng) các đối tượng Dependency vào các consumer.

Cơ chế::

~ Dependency đăng ký với Provider

~ Sau đó {A} provider sẽ nhúng các dependency vào các consumer tương ứng.

~ Consumer sẽ khởi tạo các đối tượng Dependency thông qua constructor

::Note

~ Nếu không tìm thấy token, dependency, the injector sẽ tìm kiếm đến những thằng cha @NgModule gần nhất để uỷ quyền yêu cầu.

~ Injectable (decorator): decorator cho 1 class để được cung cấp (provided) và tiêm như 1 sự phụ thuộc (injected as a dependency)

+ providedIn?: Type<any> | 'root' | 'platform' | 'any' | null

+ 'root’: là chỉ ra rằng instance này là duy nhất xuyên suất app

+ ‘platform’:

+ ‘any’:

+ 'null' : Equivalent to undefined. The injectable is not provided in any scope automatically and must be added to a providers array of an

@NgModule⁠

@Component⁠

@Directive⁠

~ There are two injector hierarchies in {A}

+ ModuleInjector: @NgModule(), @Injectable()

+ ElementInjector: @Component(), @Directive()

+ in @Injectable() decorator cho service.

+ in @NgModule() decorator (provider array) đối với NgModule.

+ in @Component() decorator (provider array) đối với Comp or directive

:: Phải đăng ký ít nhất 1 nhầ cung cấp cho bất kỳ service nào sử dụng.

:: Đăng ký các nhà cung cấp trong @Injectable(), @NgModule(), @Component()

###Đối với DI (decorator for service)::

~ @Injectable() đã thêm metadata để {A} biết được cách để tạo instance service khi có request từ Comp.

~ providedIn: 'root’: là chỉ ra rằng instance này là duy nhất xuyên suất app, Lúc này đối với providedIn: root như sau::

+ Store reference đến những injectable này.

+ Angular sẽ instantiate những injectable này 1 lần duy nhất, sau đó sẽ store lại instance này => singleton và lazy load.

~ Khi constructor gọi tới service thì sẽ thông báo tới provider để tạo instance cho comp đó

###Đối với DI (decorator for comp)::

providers: [service]::

~ Khai báo để {A} tạo instance.

constructor(private service: Service): -> là inject để sử dụng.

❤️Ví dụ ta có 1 file service destroy, muốn mỗi component destroy (service sẽ destroy theo)

-> Khai báo cho mỗi {comp} (providers: [DestroyService])

-> Mục đích tạo instance riêng cho mỗi {comp}.

-> Để khi {comp} destroy thì service destroy.

###Inject parent Comp to child Comp

###Provide một Comp khác có cùng APIs

+ Muốn tạo một UI khác riêng biệt, dựa trên những api có trong Comp trước.

TabGroupComponent and BsTabGroupComponent

{provide: TabGroupComponent,

useExisting: BsTabGroupComponent} / forwardRef(()=> BsTabGroupComponent)

class BsTabGroupComponent extends TabGroupComponent

-> forwardRef:: sẽ được gọi tới Comp ngay sau khi Comp được khởi tạo

###Using InjectionToken

Ex: Cung cấp directive cho NG_VALIDATORS token, vì vậy bất cứ khi nào chỉ thị của chúng tôi tham chiếu đến NG_VALIDATORS - nó sẽ nhận được phiên bản riêng.

-> Key TOKEN chứa instance của directive

Bản đồ map::

Ta có 1 mã token

-> sau đó dùng provider (cung cấp ~ là công thức tạo ra 1 instance cho dependency)

-> Sau khi có công thức nó sẽ tạo ra 1 dependency (là 1 object chứa tất cả những gì chúng ta cần) ~ Instance

-> Lúc này {A} sẽ đem @Inject(TOKEN) name: Class

-> Instance chỉ trong scope mà đã tạo, có 2 kiểu, nếu trong module thì sẽ gọi được như global, TH # sẽ hiểu trong scope của nó thôi

Cung cấp 1 giá trị instance (string, object…) cho TOKEN (NG_VALIDATORS…)

InjectionToken Ex::❣️

APP_INITIALIZER

~ Cung cấp 1 or nhiều chức năng khởi tạo

~ Chức năng đã được cung cấp được đưa vào khi startup and executed trong quá trình initalization App, nếu fn return promise, quá trình initalization sẽ ko complete đến khi promise được resolved

###Two injector hierarchies (phân cấp)

+ ModuleInjector hierarchy:: Cấu hình một ModuleInjector này bằng cách sử dụng chú thích @NgModule() | @Injectable().

+ ElementInjector hierarchy:: được tạo ngầm định ở phần tử DOM,

+ ElementInjector trống theo default trừ khi ta cấu hình nó trong thuộc tính provider trên @Directive | @Component

*ModuleInjector:: Được cấu hình theo 2 cách

+ Using the @Injectable() providedIn tham chiếu tới @NgModule | “root”

+ Using @NgModule providers array

~ ModuleInjector được cấu hình bởi thuộc tính @NgModule.providers & NgModule.imports.

~ ModuleInjector con được tạo khi đang loading @NgModules khác.

~ providerIn property of @Injectable():: “root”: Được sử dụng trong hầu hết ứng dụng

—————————————————————————————————————

::{A} Angular @HostBinding, @Attribute❤️😘✅

What does mean? @Hostbinding

+ Tự động kiểm tra các ràng buộc thuộc tính host(máy chủ) trong quá trình phát hiện thay đổi.

+ Nếu 1 ràng buộc thay đổi (@input) -> thì nó sẽ cập nhật phần tử host của directive

@HostBinding('class.loading')

@HostBinding('disabled')

Variable = value / @Input()

What does mean? @Attrribute

+ Thay vì sử dụng @Input(), thì @Attribute sẽ đảm nhiệm::

+ Vì @Input() là nhận vào giá trị thay đổi {A} sẽ check phát hiện thay đổi (with every change detection cycle), mặc dù giá trị là chuỗi tĩnh,

+ Đối với @Attr vì biến trả về là giá trị tĩnh, Thế nên ta ko muốn {A} triggle lắng nghe sự thay đổi, @Attr chỉ triggle 1 lần và quên luôn

+ @Attr sẽ trả về giá trị của thuộc tính từ host

-> Mỗi lần giá trị truyền vào là dạng tĩnh thì dùng @Attribute

—————————————————————————————————————

::{A} Directives || Attribute Directive && Structure Directive❤️😘✅

###Build-in directive

+ Là các lớp bổ sung hành vi (behavior) cho các phần tử trong app, {A} hỗ trợ những directive có sẵn

+ The different type directive::

+ Component: directive with a template. Là loại phổ biến nhất.

+ Attribute directive: directive thay đổi giao diện, hành vi của một phần tử, thành phần or directive khác.

Ex: constructor(private el: ElementRef) -> có thể sd: <p nameAttributeDirective></p>

+ Structural directive: thay đổi bố cục của 1 phần tử DOM bằng cách thêm or xoá phần tử DOM.

(*nameDirective ~ đối với thẻ tag bth)

(nameDirective ~ ex: private temp: TemplateRef<any> -> sd nameDirective)

-> tuỳ thuộc vào đối tượng inject constructor

Note: Không thể có 2 directive (structural) trong 1 element, vì angular ko thể biết tra được cái nào ưu tiên

Build-in attribute directives

+ NgModules using RouterModule and FormsModule to define attribute directives, phổ biến như:

+ NgClass, NgStyle, NgModel ~ adds two way binding to html element

+ NgClass:: [class.name] ~ to adds or remove a single class, using NgClass ~ to multiple css class

Ex: [ngClass]=“isLoad ? ‘load’:’else’”

[ngClass]=“property”, property: Record<string, boolean> = {nameClass: true, textClass: false}

-> NgClass using with an expression or with a method

+ NgStyle: Sử dụng để đặt nhiều style đồng thời, dựa trên state của comp

Ex: [ngStyle]=“currStyle”, currStyle: Record<string, string> = {}, this.currStyle = {‘font-weight’: state ? ‘italic’ : .‘normal’};

+ NgModel: hiển thị thuộc tính dữ liệu and update property when user makes changes

Build-in structural directives

+ Chịu trách nhiệm về cấu trúc html, định hình or định hình lại cấu trúc DOM

+ Directive phổ biến như:: NgIf, NgFor, NgSwitch

+ NgIf: Tạo or xử lý có điều kiện các lượt xem phụ from the template

Ex: *ngIf=“proper.text as name” -> use {{name}}

+ NgFor: Lặp các mục trong danh sách

Ex: *ngFor=“let item of array; index as I; trackBy: trackByFn”

<ng-template ngFor let-item [ngForOf]=“items” let-i=“index” [ngForTrackBy]=“trackByFn”><li></li></ng-template>

~> for (const item of list) {} in file ts

+ NgSwitch: một tập hợp các lệnh chuyển đổi các chế độ xem thay thế, giống như switchCase, hiển thị những phần tử mà chúng ta cần

+ NgSwitch có 3 directive:: NgSwitch ~ directive thay đổi hành vi của các directive đồng hành cùng nó, NgSwitchCase ~ thêm phần tử vào DOM khi giá trị ràng buộc bằng giá trị của switch và xoá khi nó ko bằng, NgSwitchDefault ~ thêm phần tử vào DOm khi không còn lựa chọn nào thoả mãn

### Structural Directives

(In constructor inject TemplateRef<any> and ViewContainerRef)

-> Directive tạo chế độ xem được nhúng từ <ng-template> do {A} tạo và chèn chế độ xem vào vùng chứa

+ TemplateRef: truy cập content <ng-template>

+ ViewContainerRef: truy cập vùng chứa chế độ xem

Ex: this.viewContainer.createEmbeddedView(this.templateRef); -> Vùng chứa tạo 1 chế độ xem cho templateRef được nhúng từ template

-> Tuỳ vào điều kiện check use: this.container.clear() để xoá vùng chứa

Structural directive shorthand

+ Cú pháp dấu * trên structural directive, giống như *ngIf cách viết tắt của {A}

-> {A} biến đổi dấu hoa thị phía trước một chỉ thị cấu trúc thành <ng-template> bao quanh phần tử host và phần tử con

{A} không tạo phần tử <ng-template> thực nhưng có note giữ chỗ của phần đó.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.