Angular2: Design guideline to declare and access App_Providers in Angular2 Application

Standard

If your angular 2 application is depending upon lot of services and other providers, the best way make your angular2 code more maintainable, readable and clean is to consume all service signatures in separate file under a constant type variable and then export this variable in app.module.ts file.  By using this strategy we will achieve separation of concern and avoid polluting code in app.module.ts otherwise including reference of all services will increase LOC and make it more messy and hard to read app.module file.

Bold code below shows this design guideline implementation.

app.provider.ts code:

import { PageTitleService } from './shared/service/page-title.service';
import { AlertService, ToasterService } from './shared/service/alert.service';
import { BreadcrumbService } from './shared/service/breadcrumb.service';
import { LoaderService } from './shared/service/loader.service';
import { SpeechRecognitionService } from './shared/service/speech-recognition.service';
import { WebApiObservableService } from './shared/service/web-api-observable.service';
import { WebApiPromiseService } from './shared/service/web-api-promise.service';
import { UrlHistoryService } from './search-movies/shared/service/url-history-store.service';

export const APP_PROVIDERS = [
    PageTitleService,
    AlertService,
    ToasterService,
    BreadcrumbService,
    LoaderService,
    SpeechRecognitionService,
    WebApiObservableService,
    WebApiPromiseService,
    UrlHistoryService
]

app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

import { DashboardMainModule } from './dashboard/dashboard.module';
import { AppComponent } from './app.component';
import { AppRoutingModule  } from './app.routing';
import { APP_PROVIDERS } from './app.provider';

@NgModule({
    imports: [
        //angular builtin module
        BrowserModule,
        HttpModule,

        //application feature module
        DashboardMainModule,
        AppRoutingModule 
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        APP_PROVIDERS
    ],
    bootstrap: [
        AppComponent
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

export class AppModule {
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s