Cacher is the code snippet organizer for pro developers

//  import injectable decorator so the service would be injectable to components
import { Injectable } from '@angular/core';
//  import http to make asynchronous calls
import { Http } from '@angular/http';
//  import Reactive's mapping for observables
import 'rxjs/add/operator/map';

//  decorate class as available to an injector for instantiation
@Injectable()

//  export service
export class IService {
	constructor(private http: Http) {}
	public get = () => {
	  //  return an observable from an http get request
		return this.http.get('https://jsonplaceholder.typicode.com/posts')
		  //  transform the response (into json format in this example)
			.map(response => response.json());
	}
}

//  import platform-specific (here: browser) bootstraper
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//  import main application module
import { AppModule } from './app/app.module';

//  execute bootstrapping
platformBrowserDynamic().bootstrapModule(AppModule);

//  import wrapper interface around a module that also includes the providers
import { ModuleWithProviders } from '@angular/core';
//  import Routes and RouterModule for routing functionality
import { Routes, RouterModule } from '@angular/router';

//  import all components to route to
import { AComponent } from './components/A.component';
import { BComponent } from './components/B.component';

//  create a constant of the type Routes to be fed to RouterModule's forRoot method
const appRoutes: Routes = [
	{
		path: '',
		component: AComponent
	},
	{
		path: 'b-content',
		component: BComponent
	}
];

//  export a constant of the type ModuleWithProviders returned by RouterModule
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(appRoutes);

//  import angular module code
import { NgModule }      from '@angular/core';
//  import services essential to launch and run a browser app
//  also re-export CommonModule from @angular/common so that components in the AppModule module also have access to the Angular directives such as NgIf, NgFor, ...
import { BrowserModule } from '@angular/platform-browser';
//  import optional providers like forms, http, ...
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//  import main application component
import { AppComponent }  from './app.component';
//  import all other components
import { AComponent }  from './components/A.component';
import { BComponent }  from './components/B.component';
//  import routing code
import { ROUTING } from './app.routing';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule, ROUTING ],            //  import modules depended on
  declarations: [ AppComponent, AComponent, BComponent, ... ],                  //  declare components, directives, pipes
  providers:    [ AlphaProvider ],                                              //  Provider services to main application root injector
  bootstrap:    [ AppComponent ]                                                //  bootstrap a component
})

//  export main module
export class AppModule { }

//  import component code
import { Component } from '@angular/core';

//  decorate component
@Component({
  selector: 'app',                                    //  where to include component
  template:                                           //  DOM structure of component (templateURL for external file)
  `
  	<ul>
  		<li><a routerLink="/">Home</a></li>
  		<li><a routerLink="/about">About</a></li>
  	</ul>
  	<router-outlet></router-outlet>
  `,
})

//  export component
export class AppComponent  { }

import { Component } from '@angular/core';
//  import service(s)
import { IService } from '../services/i.service';

@Component({
	moduleId: module.id,                                    //  property needed for commonjs to find relative assets (e.g. templates, stylesheets)
	selector: 'a',
	templateUrl: 'a.component.html',                        //  relative path to the template
	providers: [ IService ]                                 //  inject service provider
})

export class AComponent  {
	public property1: type;
	private property2: someOtherType;
  ...

	constructor(private iService: IService) {
		this.property1 = someValue;
		//  fetch data of type observable
		this.iService.get()
		  //  subscribe to it
		  .subscribe(response => {
		    //  assign its value to 
			  this.property2 = response;
		  });
	}

	public otherMethod = ():void => {
    //  some functionality
	}
}

interface someOtherType {
  //  object structure of the data returned by service
}

/
    app/
        components/
            A.component.ts (+ js)
            A.component.html
            B.component.ts (+ js)
            B.component.html
            ...
        services/
            I.service.ts (+ js)
            II.service.ts (+ js)
      app.component.ts (+ js)           //  top level component that bind all other components together
      app.module.ts (+ js)              //  application module bootstrapped by app.ts and bootstrapping components
      app.routing.ts (+ js)             //  route definition
  index.html
  app.ts (+ js)                       //  main file loaded by index.html and bootstrapping modules
  .css
  (systemjs.config.extras.js)
  (systemjs.config.js)
  (tsconfig.json)