diff --git a/README.md b/README.md index bca5dbc..2773d04 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,7 @@ - [The Basic](docs/thebasic.md) - [Components & Databinding](docs/component_databinding.md) - [Directives](docs/directives.md) -- [Services](docs/services.md) -- [Dependency Injection](docs/dependency_injection.md) +- [Services and Dependency Injection](docs/services_dipendencyinjection.md) - [Routing](docs/routing.md) - [Observables](docs/observables.md) - [Forms](docs/forms.md) diff --git a/docs/dipendencyinjection.md b/docs/dipendencyinjection.md deleted file mode 100644 index e69de29..0000000 diff --git a/docs/services.md b/docs/services.md deleted file mode 100644 index e69de29..0000000 diff --git a/docs/services_dipendencyinjection.md b/docs/services_dipendencyinjection.md new file mode 100644 index 0000000..1d7f57e --- /dev/null +++ b/docs/services_dipendencyinjection.md @@ -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. \ No newline at end of file