PedroJesusRomeroOrtega / MarvelDI

Angular frontend to practice with Dependecy injection and lazy modules

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MarvelDI

This project was generated with Angular CLI version 7.1.3.

It uses:

I used this app to practice with dependency injection.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Build to Github pages

npm run build-gh
npx angular-cli-ghpages --dir=dist/MarvelDI

Dependency injection explanation

old way DI

new way DI

Bubling up throught the injector tree until it reaches the root injector

Application View (generated with ngrev)

ngrev image

Eager modules

AppModule

AppRoutingModule

CoreModule

CredentialsService

It will be instantiated when ComicsService or CharactersService are instantiated.

  • Global singleton.
  • Lazy.

HttpErrorHandler

It will be instantiated when ComicsService or CharactersService are instantiated.

  • Global singleton.
  • Lazy.

MessageService

It will be instantiated with CoreModule. Is better to use providein:'root' in messageService.

  • Global singleton.
  • Eager.
  • No treeshake.

SharedModule

Lazy modules

ComicsModule

ComicService

provideIn: ComicsServiceModule. It will be instantiated when ComicsComponent load. We can´t used ComicsModule directly because it generates circular dependencys. That´s why we use _ComicsServiceModule.

  • Singleton in ComicsModule.
  • Not accesible from another module

CharactersModule

CharacterService

providedIn: 'root'. It will be instantiated when CharactersComponent load.

  • Global singleton
  • Lazy until a eager Component instantiate it.

CharactersComponent

MessageService has it´s own instance for this component using providers. In this way the opinions are particular to this component, not shared with Comics. Try to comment to see that all opinions are shown without taking into account if you are in characters or comics.

References

Dependency injection by Tomas Trajan

Oficial guide

John Papa example

About

Angular frontend to practice with Dependecy injection and lazy modules


Languages

Language:TypeScript 86.6%Language:HTML 12.0%Language:CSS 1.3%