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

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.