4. Dependency Injection. Providers and Injectors

ReflectiveInjector
https://github.com/angular/angular/blob/c33fda260726f5c050a75fc01fbd7a74800f8e37/modules/%40angular/core/src/di/reflective_injector.ts#L54

Inject
https://github.com/angular/angular/blob/f5c8e0989d85bc064f689fc3595207dfb29413f4/modules/%40angular/core/src/di/metadata.ts#L17

Inject parent search
https://github.com/angular/angular/blob/b5c4bf1c59c56d48b8a536aa61c7bd72d94c99fc/modules/%40angular/core/src/linker/view.ts#L118

https://github.com/angular/angular/blob/b5c4bf1c59c56d48b8a536aa61c7bd72d94c99fc/modules/%40angular/core/src/linker/element_injector.ts

Providers:
https://github.com/angular/angular/blob/a378aab9aabd57387c9469db0d78765572216770/modules/%40angular/core/src/di/provider.ts

OpaqueToken
https://github.com/angular/angular/blob/d169c2434e3b5cd5991e38ffd8904e0919f11788/modules/%40angular/core/src/di/injection_token.ts#L10

Injectable
https://github.com/angular/angular/blob/f5c8e0989d85bc064f689fc3595207dfb29413f4/modules/%40angular/core/src/di/metadata.ts#L114

Http Service
https://github.com/angular/angular/blob/master/modules/%40angular/http/src/http.ts#L103

Transcript

2. Today's Schedule 1. Cohesion and Coupling 2. S.O.L.I.D 3. Dependency Injection Pattern 4. Angular 2 Dependency Injection 5. Services 6. Http Service
3. Cohesion Cohesion measures the strength of relationship between pieces of functionality within a given module / class
4. Cohesive Modules / Classes • Represent a single entity • They have a well defined role
5. The goal is high cohesion
6. Coupling A measure of how closely connected two modules are.
7. The goal is loose coupling
8. Tight vs Loose 
 Coupling
9. Tight Coupling • A change in one module usually forces changes in other modules. • Assembly of modules might require more effort and time due to the increased inter-module dependency. • A particular module might be harder to reuse and test because dependent modules must be included.
10. S.O.L.I.D.
11. S.O.L.I.D • Single Responsibility Principle • Open/Closed Principle • Liskov Substitution Principle • Interface Segregation Principle • Dependency Inversion Principle
12. Single Responsibility Principle A class should have one and only one reason to change, meaning that a class should have only one job.
13. Open/Closed Principle Objects or entities should be open for extension, but closed for modification.
14. Liskov Substitution Principle Let q(x) be a property provable about objects of x of type T. Then q(y) should be provable for objects y of type S where S is a subtype of T.
 
 Every subclass should be substitutable for their parent class.
15. Interface Segregation Principle A client should never be forced to implement an interface that it doesn’t use. Clients shouldn’t be forced to depend on methods they do not use.
16. Dependency Inversion Principle High level modules must not depend on the low level modules. Both should depend on abstractions.
17. Dependency Injection
18. Dependency Injection It's a coding pattern in which a class receives its dependencies from external sources rather than creating them itself. Easy to reuse in different environments => Easy Testing
19. DI Wiring
20. DI Maintenance We have to update everywhere we want to use the logger and all of our tests.
21. DI Container (no maintenance) We don't have information about the dependencies anymore, so we don't need to maintain the main function.
22. NG Dependency Injection
23. NG DI • Provider - The provider knows how to create the objects. It takes a token and maps it to a factory function that creates the object. • Injector - The injector relies on the providers to create the instances of the dependencies our components need.
24. Providers • Providers can be defined in a ngModule or inside a Component. • Providers registered in the ngModule will be available to all components within the module. • Providers registered within the Component will be available only to the Component and its children.
25. Injectors • Each Component has its own Injector. • A provider lookup is performed on the parent Injector if a provider is not found.
 
 (When a Component is set as host the lookup will stop there)
26. NG ReflectiveInjector https://github.com/angular/angular/blob/c33fda260726f5c050a75fc01fbd7a74800f8e37/ modules/%40angular/core/src/di/reflective_injector.ts#L54
27. Inject Decorator https://github.com/angular/angular/blob/f5c8e0989d85bc064f689fc3595207dfb29413f4/ modules/%40angular/core/src/di/metadata.ts#L17
28. NG DI Example
29. https://github.com/angular/angular/blob/b5c4bf1c59c56d48b8a536aa61c7bd72d94c99fc/ modules/%40angular/core/src/linker/element_injector.ts https://github.com/angular/angular/blob/b5c4bf1c59c56d48b8a536aa61c7bd72d94c99fc/ modules/%40angular/core/src/linker/view.ts#L118 1. Check for property in current Injector 2. If not found check parent Injector NG DI Example Steps
30. Providing a class ( using type annotations )
31. Providing a class (short way) ( using type annotations )
32. Alternative class provider ( using annotations )
33. More About Providers https://github.com/angular/angular/blob/ a378aab9aabd57387c9469db0d78765572216770/modules/ %40angular/core/src/di/provider.ts
34. OpaqueToken • OpaqueToken is a preferable way to use strings as tokens because of possible collisions caused by multiple providers using the same string as two different tokens. https://github.com/angular/angular/blob/d169c2434e3b5cd5991e38ffd8904e0919f11788/ modules/%40angular/core/src/di/injection_token.ts#L10
35. OpaqueToken
36. Injectable Decorator https://github.com/angular/angular/blob/ f5c8e0989d85bc064f689fc3595207dfb29413f4/modules/%40angular/core/src/di/ metadata.ts#L114 If a class requires dependencies to get injected we need to make it available to the Injector
37. @Injectable
38. Services • We use them to extract functionality and maintain data that is needed in multiple places in our applications. • This way we keep the components focused on supporting the view. • It also makes it easier to unit test the component with a mock service.
39. Services are just classes that we provide via DI
40. Demo
41. Http Service https://github.com/angular/angular/blob/master/modules/%40angular/http/src/http.ts#L103
42. Questions?