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.

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.