Angular 2 empty templates

app.component.ts

import {Component, OnInit} from 'angular2/core'

@Component({
  selector: 'my-app', // So that wherever you use <my-app></my-app>, this component is compiled and inserted
  template: '<h1>{{title}}</h1>', // alternative: templateUrl : '';
})
export class AppComponent implements OnInit { // The OnInit part
  // $scope.* variables are declared here without the $scope
  title = 'Minimal NgModule';

  constructor() {
    // Run as soon as component is beginning to be created
  }

  ngOnInit() {
    // Run after component is done initializing
  }
}

app.module.ts

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';

// This would be our main component. (our main component would be the routes component
// NOTE : <ui-view></ui-view> = <router-outlet></router-outlet> and ui-sref="" -> routerLink=""
import { RouterModule, Routes } from '@angular/router';

import { AppComponent }         from './app.component';
import { SomeComponent }        from './some.component';
import { AnotherComponent }     from './another.component';

const appRoutes: Routes = [
  { path: 'some', component: SomeComponent },
  { path: 'another', component: AnotherComponent },
];

// @ denotes a decorator. Meaning, the class below this decorator is run through a specific function and then compiled
// Angular uses this so that it can compile any aspect into more efficient smaller pure javascript entity
// This is what makes angular2 more of a compile-time framework than a run-time framework

@NgModule({ 
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [
    AppComponent,
    SomeComponent,
    AnotherComponent,
  ],
  bootstrap: [ AppComponent ]
})
// `export` is what defined what is the `output` of a fine which you can `import` from elsewhere
export class AppModule { 
  // Any config or run statements would be put in the constructor here
}

main.aot.ts

// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';

// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app/app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

main.ts

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app/app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

my.directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[directiveName]' }) // Note : This wont be used as directive-name="". But as [directiveName]=""
export class DirectiveNameDirective {
  constructor(el: ElementRef) { // el is the element that the directive is used on
    // The link function would be written here
    // This would only be for a attribute-directive
  }
}

/*
* There are two types of directives in ng2 : structural and attribute
* Most of the directives that we have are best described as components and not just directives.
* So, we should look at converting them into ng2 components instead of ng2 directives
*/

workflow.md

More notes about workflow here