This document provides an introduction to key concepts in Angular2 including modules, components, views, metadata, data binding types, directives, services, and dependency injection. Modules define an application structure. Components define classes with metadata for templates and directives. Views are HTML templates. Data binding syncs data and displays. Directives add behavior to views. Services provide reusable business logic. Dependency injection provides services to components.

1. Intro to Angular2

2. Key Concepts
• Modules
• Components (Controllers)
• Views(Html)
• Metadata (annotation of class that define how to process the class)
• Data binding (4 types)
• Directives (*ngIF, *ngFor, ngModel) - attribute directives
• Service - (logging, data service, message bus, custom business logic)
• Dependency Injection

3. Binding Types

4. Modules
• export class AppComponent { }
• import {AppComponent} from './app.component';

5. Component
export class AppComponent {
message: string
sayHi(message: string) {
this.message = message;
}
}

6. Meta data
@Component({
selector: ‘my-app',
templateUrl: 'app/app.component.html',
directives: [HeroDetailComponent],
providers: [HeroService]
})
export class AppComponent { ... }

7. Data Binding
• <div>{{hero.name}}</div>
• <hero-detail [hero]="selectedHero"></hero-
detail>
• <div (click)=“selectHero(hero)"></div>
• <input [(ngModel)]="hero.name">

8. Directives
• <div *ngFor="#hero of heroes"></div>
• <hero-detail *ngIf=“selectedHero"></hero-detail>
• <input [(ngModel)]="hero.name">

9. Service
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}

10. Dependency Injection
@Component({
providers: [HeroService]
})
constructor(private _service: HeroService){ }
• bootstrap(AppComponent, [BackendService,
HeroService, Logger]);

12. Demos