Angular 2: Heroes tutorijal

Kako bi proli kroz tutorijal, potrebno je skinuti projekat sa ovog linka:

https://github.com/angular/quickstart.git
Kada se unzipuje fajl, preko cmd ui u quickstart-master folder I tu pokrenuti
npm install. Kada se instaliraju node modules, pokrenuti aplikaciju sa npm
start, radi provere da li je sve ok.

Nakon toga idite na link:

https://angular.io/docs/ts/latest/tutorial/
gde se nalazi tutorijal sa herojima. U introduction delu se nalazi kako e
aplikacija izgledati I koje su sve opcije, pogledati samo.
Nakon introduction dela, dolazi The hero editor I tu je poetak pravljenja
aplikacije. Baciti pogled na poetku jer je dosta stvari ve objanjeno u
dokumentu o Angularu koji se nalazi u docs folderu.
Nove stvari su na sredini stranice, gde stoji naslov Two way binding gde
se opisuje nain vezivanja podataka.
Potrebno je dodati novi fajl unutar app foldera u projektu, pod nazivom
app.module.ts I unutar njega dodati sledei kod:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Nakon toga je potrebno napraviti aplikaciju sa izgledom kao na slici:
Kod app.component.ts je:
import { Component } from '@angular/core';

export class Hero { //kreiranje klase sa id I imenom za heroje

id: number;
name: string;
}
@Component({
selector: 'my-app',
//template za izgled gore navedene aplikacije
template: `
<h1>{{title}}</h1> //ovde je title iz classe AppComponent (dalje u kodu)
<h2>{{hero.name}} details!</h2> //iz propertija hero izvlaimo ime
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
//pomou ngModela je mogue bindovanje podataka, na osnovu unesenog texta
// u input polje dolazi do promene imena u hero.name koji je u h2 tag-u.
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
Kada dodamo tekst u input polju dolazi do promene I samog imena heroja
kao to se vidi na slici. To nam omoguava ngModel.