Update Docs - services and dipendency ijnection
This commit is contained in:
parent
8b0a745358
commit
d7e5a64031
@ -5,8 +5,7 @@
|
|||||||
- [The Basic](docs/thebasic.md)
|
- [The Basic](docs/thebasic.md)
|
||||||
- [Components & Databinding](docs/component_databinding.md)
|
- [Components & Databinding](docs/component_databinding.md)
|
||||||
- [Directives](docs/directives.md)
|
- [Directives](docs/directives.md)
|
||||||
- [Services](docs/services.md)
|
- [Services and Dependency Injection](docs/services_dipendencyinjection.md)
|
||||||
- [Dependency Injection](docs/dependency_injection.md)
|
|
||||||
- [Routing](docs/routing.md)
|
- [Routing](docs/routing.md)
|
||||||
- [Observables](docs/observables.md)
|
- [Observables](docs/observables.md)
|
||||||
- [Forms](docs/forms.md)
|
- [Forms](docs/forms.md)
|
||||||
|
57
docs/services_dipendencyinjection.md
Normal file
57
docs/services_dipendencyinjection.md
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
# Services and dependency injection
|
||||||
|
|
||||||
|
A service prevents code duplication (LogService) or handlich with data (UserService - Data Sotrage).
|
||||||
|
|
||||||
|
## Create a logging service from
|
||||||
|
|
||||||
|
Naming: `logging.service.ts`
|
||||||
|
|
||||||
|
> Instanciate a service manually with method `new` is the wrong way! Angular offers a much better solution.
|
||||||
|
|
||||||
|
## Dependency injection
|
||||||
|
|
||||||
|
Angular is responsable to instanciate the service which is passed as argument to the constructor. Which tels Angular thet the LoggingService is required.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { LoggingService } from '../logging.service.ts';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
...
|
||||||
|
providers: [LoggingService]
|
||||||
|
})
|
||||||
|
|
||||||
|
export class NewAccountComponent {
|
||||||
|
|
||||||
|
constructor(private loggingService: LoggingService) {}
|
||||||
|
|
||||||
|
function(){
|
||||||
|
// Calling the loggingService
|
||||||
|
// logStatusChange is a function in the loggingService which accepts a string as argument.
|
||||||
|
this.loggingService.logStatusChange(accountStatus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`private loggingService` makes directly a property of type `LoggingService` and with the `provider` in the `@Component`-decorator, angular instanciate the logging service.
|
||||||
|
|
||||||
|
## Hierarchical Injector
|
||||||
|
|
||||||
|
By instanciate a service, Angular provides the same Instance to the component and all its childs.
|
||||||
|
|
||||||
|
| Level | Description |
|
||||||
|
| ------------------- | --------------------------------------------------------------------------------------------- |
|
||||||
|
| AppModule | Service is available **Application-wide** |
|
||||||
|
| AppComponent | Same instance of service is available for **all Components** (but **not for other services**) |
|
||||||
|
| Any other Component | Same instance of Service is available for **the Component and all its chilf component** |
|
||||||
|
|
||||||
|
By declare the service in a lower component, will create a new instance and override the inherited from the parents one.
|
||||||
|
|
||||||
|
It is necessary to declare it in the `impot` and in the `constructor`.
|
||||||
|
|
||||||
|
`app.module.ts` is the highest level to declare a service. This opens the possibility to inject services into an other service.
|
||||||
|
|
||||||
|
To the service who will be injected a service, is necessaty to provide metadata. Its keyword is `@Injectable()`
|
||||||
|
|
||||||
|
Services can also be used to avoiding data/event/listener chaining.
|
||||||
|
|
||||||
|
By Implementing the event in the service, and the listener in the component, can mitigate the chaining.
|
Loading…
Reference in New Issue
Block a user