Angular 2 - Module


// Angular 2 - Module

Angular Modules contain all our components and everything else we need for our 

Angular apps are modular. They consist of many files each dedicated to a purpose.
ES5 JavaScript doesn't have a native module system. There are several popular 
3rd party module systems we could use. Instead, for simplicity and to avoid 
picking favorites, we'll create a single global namespace for our application.
We'll call it app and we'll add all of our code artifacts to this one global 
object.  We don't want to pollute the global namespace with anything else. So 
within each file we surround the code in an IIFE ("Immediately Invoked Function 

(function(app) {
})( || ( = {}));

We pass the global app namespace object into the IIFE, taking care to initialize 
it with an empty object if it doesn't yet exist.

Most application files export one thing by adding that thing to the app namespace. 
Our app.component.js file exports the AppComponent.

(function(app) {
  app.AppComponent =
      selector: 'my-app',
      template: '<h1>My First Angular App</h1>'
      constructor: function() {}
})( || ( = {}));

A more sophisticated application would have child components that descended from 
AppComponent in a visual tree. A more sophisticated app would have more files 
and modules, at least as many as it had components.

Modules rely on other modules. In JavaScript Angular apps, when we need 
something provided by another module, we get it from the app object. When 
another module needs to refer to AppComponent, it gets it from the 
app.AppComponent (using the declarations line) like this:

(function(app) {
  app.AppModule =
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
      constructor: function() {}
})( || ( = {}));

Angular is modular. It is a collection of library modules. Each library is 
itself a module made up of several, related feature modules. When we need 
something from Angular, we use the ng object.

import './rxjs-extensions';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';
import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { HeroSearchComponent }  from './hero-search.component';
  imports: [
  declarations: [
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
export class AppModule { }

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }

  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
export class AppRoutingModule {}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License