Hot to avoid declaring all services in bootstrap () function

So, based on my previous question: Angular2 "Services" how @ to include one service in another (single)

Why do I have an answer, now a new question dawned on me. And this is due to the fact that so far everywhere I look that all services are included in the boot method. Things like the Pascal Precht blog post also point to this: http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

But I see this (compared to Angular1) as really ugly coding. To do this, in these cases, I will need to include all my services in the application component (Angular1 configuration module). While the strength should come from the fact that each module "Module" takes care of getting its own dependencies (providers), which are singleton throughout the application.

Now my question is:

Is it possible for classes to define their own dependencies, while the dependency remains single for all other classes that require the same. Sort of:

app.ts

@Component({ selector: 'app', providers: [ TeamCollection ] }) @View({ template: '{{name}}' }) class TestApp { name: string; teamCollection: TeamCollection; constructor(@Inject(TeamCollection) teamCollection: TeamCollection){ this.name = 'Angular2'; this.teamCollection = teamCollection; } } export function main() { bootstrap(TestApp); } 

team.ts

 @Injectable() export class TeamCollection extends BaseCollection { playerCollection: PlayerCollection; constructor(playerCollection: PlayerCollection) { super(); this.playerCollection = playerCollection; } create(data: Object): TeamModel { return new TeamModel(data); } } 

player.ts

 @Injectable() export class PlayerCollection extends BaseCollection { create(data: Object): PlayerModel { return new PlayerModel(data); } } 

Without me including TeamCollection and PlayerCollection in the array of application component providers. And instead, Teamcollection inserts an instance of SingleConlection PlayerCollection into its constructor after creating a Singleton instance of TeamCollection through an array of application component providers.

For me, this really doesn't work, but if this is Angular2's way, I just need to learn how to adapt to it.

Edit: I would like to explain this further by illustrating the fact that if I need a service that is used by all components in the application, I have to add it to the boot method. That in a project that previously had possibly more than 50 services, it becomes incredibly ugly (if all this should be in the initial load).

Other: this would be really inconsistent, since the @RouteConfig view is what looks at subclasses when you specify a route, like abc/... The value of the ABC component can have its own @RouteConfig, etc. What a great change compared to Angular1, in which we needed to specify everything in config ().

Edit2: See @alexpods Comment: https://github.com/angular/angular/issues/5063#issuecomment-154753852

And @EricMartinez comment below. To see the correct way to handle modularity in angular2.

+5
source share
2 answers

You can export services as a single token and provide them as a collection in bootstrap() , for example

a.js

 export const MODULE_A: any[] = [Service1, Service2, Service3]; 

b.js

 export const MODULE_B: any[] = [Service3, Service4, Service5]; 

c.js

 import {MODULE_A} from 'a.js'; import {MODULE_B} from 'b.js'; export const MODULE_C: any[] = [MODULE_A, Module_B, Service6]; 

main.js

 import {MODULE_C} from 'c.js'; bootstrap(AppComponent, [MODULE_C]; 

This is common practice in Angular2, e.g. ROUTER_PROVIDERS , MD_CARD_PROVIDERS , ...

+1
source

@RouteConfig is no longer used on rc4, don't worry about that.

For your services, how about something like that

 export const YOUR_SERVICES_PROVIDERS = [ provide(Service1, {useClass: Service1}), provide(Service2, {useClass: Service2}), provide(Service3, {useClass: Service3}), provide(Service4, {useClass: Service4}), provide(Service50, {useClass: Service50}) ]; 

and then on your media:

 bootstrap(App, [ ...YOUR_SERVICES_PROVIDERS ]); 

All your services will be available in your application.

0
source

Source: https://habr.com/ru/post/1235421/


All Articles