A brief introduction to key concepts in angular 2

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