Angular2 first contact « »

import { Component } from 'angular2/core';

@Component({
// this is a decorator and adds functionality to the class
	selector: 'my-story',
	template: '<h3></h3>'
})
export class StoryComponent {
	story = {id: 100, name: 'Super Cool Title'};
	color = 'blue';
}

import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';

boostrap(AppComponent);

import {Injectable} from 'angular2/core';

@Injectable()
export class VehicleService {
	getVehicles = () => [
		{id:1, name="xyz" },
		{id:2, name="xyz-342" },
		{id:3, name="a2000" }
	];
}

import {VehicleService} from '/vehicle.service';

@Component({
	selector: 'my-vehicles',
	templateUrl: 'app/vehicles.component.html',
	providers: [VehicleService]
})

import { VehicleService} from './vehicle.service';

@Component({
	selector: 'my-vehicles',
	templateUrl: 'app/vehicles.component.html',
	providers: [VehicleService]
})
export class VehiclesComponent {
	constructor(private _vehicleService: VehicleService) {}
	vehicles = this._vehicleService.getVehicles();
}

// vehicle.component.ts
import { Component } from 'angular2/core';
import { Vehicle, VehicleService } from '../vehicle.service';

import { Component } from 'angular2/core';
import { Vehicle } from './vehicle.service';

// @Component is Metadata, we describe the component
@Component({
	selector: 'story-vehicles',
	templateUrl: './vehicles.component.html'
})

// main.ts

// Entry point for the app
// This is where we start

import { bootstrap } from 'angular2/platform/browser';
import { StoryComponent } from './story.component';

bootstrap(StoryComponent);

// story.component.ts

@Component({
	selector: 'my-story',
	templateUrl: 'app/story.component.html'
})
export class StoryComponent {
	name = 'Han Solo';
}

// character-list.component.ts
import { Component } from 'angular2/core';
import { Character } from './character';
import { CharacterComponent } from './character.component';

// directives: [CharacterComponent] <-- is very important because tells the nested components

@Component({
	selecctor: 'my-chacter-list',
	templateUrl: 'app/character-list.component.html',
	directives: [CharactercComponent]
})
export class CharacterListComponent {
	selectedCharacter: Character;
	characters = [
		new Character(1, 'Han Solo'),
		new Character(2, 'Luke Skywalker'),
		new Character(3, 'BB-8'),
		new Character(4, 'Rey')
	];

	select(character: Character) {
		this.selectedCharacter = character;
	}
}

// character.component.ts
import { Component, Input } from 'angular2/core';
import { Character } from './character';

@Component({
	selector: 'my-character',
	templateUrl: 'app/character.component.html'
})
export class CharacterComponent {
	@Input() character: Character;
}

@Component({
    slector: 'story-characters',
    templateUrl: './app/characters.component.html',
    styleUrls: ['./app/characters.component.css'],
    directives: [CharacterDetailComponent],
    providers: [HTTP_PROVIDERS, CharacterService]
})

@Component({
    selector: 'story-characters',
    templateUrl: './app/characters.component.html',
    styleUrls: ['./app/characters.component.css'],
    directives: [CharacterComponent],
    providers: [CharacterService]
})
export class CharactersComponent implements OnInit {
    @Output() changed = new EventEmitter<Character>();
    @Input() storyId: number;
    characters: Character[];
    selectedCharacter: Character;

    constructor(private _characterService: CharacterService) {}

    ngOnInit() {
        this._characterService.getCharacters(this.storyId)
            .subscribe(characters => this.characters = characters);
    }

    select(selectedCharacter: Character) {
        this.selectedCharacter = selectedCharacter;
        this.changed.emit(selectedCharacter);
    }
}

export class CharactersComponent implements OnInit {
    @Output() changed = new EventEmitter<Character>();
    @Input() storyId: number;
    characters: Character[];
    selectedCharacter: Character;

    select(selectedCharacter: Character) {
        this.selectedCharacter = selectedCharacter;
        this.changed.emit(selectedCharacter);
    }
}

export class FilterComponent {
    @Output() changed: EventEmitter<string>;
    filter: string;

    clear() {
        this.filter = '';
    }
    // ...
}

@Input() vehicle: Vehicle;
@Output() onChanged: new EventEmitter<Vehicle>();
changed() { this.onChanged.emit(this.vehicle); }

select(name: string) {
	let msg = `You selected ${name}`;
	console.log(msg);
	this.isSelected = !this.isSelected;
}

import { Pipe, PipeTransform } from 'angular2/core';

@Pipe({name: 'myCustomPipe'})
exports class MyCustomPipe implements PipeTransform {
	transform(value: string, args: any[]) {
		return // transformed value
	}
}

// vehicle.service.ts

@Injectable()
export class VehcileService {
	getVehicles() {
		return [
			new Vehicle(10, 'abc3d'),
			new Vehicle(12, 'ddasd2000'),
			new Vehicle(14, 'XZY200')
		];
	}
}

import { Injectable } from 'angular2/core';

// the import from another file would be:
// import { Character } from './character.service'
export class Character {
	constructor(public id: number, public name: string, public color: string);
}

@Injectable()
export class CharacterService {
	getCharacters() {
		return [
			new Character(10, 'abc3d'),
			new Character(12, 'ddasd2000'),
			new Character(14, 'XZY200')
		];
	}
}

// vehicle.component.ts
import { VehicleService } from './vehicle.service';

@Component({
	selector: 'my-vehicles',
	templateUrl: 'app/vehicles.component.html',
	providers: [VehicleService]
})
export class VehicleListComponent {
	vehicles: Vehicle[];

	constructor(private _vehicleService: VehicleService) {
		this._vehicleService.getVehicles()
			.subscribe(vehicles => this.vehicles = vehicles);
	}
}

@Injectable()
export class VehicleService {
	constructor(private _http: Http) {}

	getVehicles() {
		return this._http.get(vehicleUrl)
			.map((response:Response) => <Vehicle[]>response.json().data);
	}
}

@Component({
    selector: 'story-characters',
    templateUrl: './app/characters.component.html',
    styleUrls: ['./app/characters.component.css'],
    directives: [CharacterDetailComponent],
    providers: [HTTP_PROVIDERS,CharacterService]
})
// Implements the lifecycle hook's interface OnInit
export class CharactersComponent implements OnInit {
    @Output() changed = new EventEmitter<Character>();
    @Input() storyId: number;
    characters: Character[];
    selectedCharacter: Character;

    constructor(private _characterService: CharacterService) {}

    // When the Component initializes, the ngOnInit function is executed
    ngOnInit() {
        this.characters = this._characterService.getCharacters(this.storyId);
    }

    select(selectedCharacter: Character) {
        this.selectedCharacter = selectedCharacter;
        this.changed.emit(selectedCharacter);
    }
}

// character-list.component.ts

import { Component, OnInit } from 'angular2/core';
import { Character, CharacterService } from './character.service';
import { CharacterComponent} from './character.component';

@Component({
	selector: 'my-character-list',
	templateUrl: 'app/character-list.component.html',
	styles: ['li {cursor: pointer;}'],
	directives: [CharacterComponent]
})
export class CharacterListComponent implements OnInit {
	selectedCharacter: Character;
	characters: Character[] = [];
	messages: string[] = [];

	constructor(private _characterService: CharacterService) {}

	ngOnInit(){
		this.chracters = this._characterService.getCharacters();
	}

	select(character: Character) {
		this.slectedCharacter = character;
	}

	clear() {
		this.selectedCharacter = null;
	}

	log(msg: string){
		this.messages.splice(0,0,msg);
		console.log(msg);
	}
}

import { Component, EventEmitter, Input, Output, OnChanges, OnInit, AfterViewInit, OnDestgory} from 'angular2/core';
import { Character } from './character.service';

// angular2
getVehicles() {
	return this._http.get('api/vehicles')
		.map((response: Response) =>
			<Vehicle[]>response.json().data
		)
		.catch(this.handleError);
}

import { Component } from 'angular2/core';
//  Located in module angular2/http
import { HTTP_PROVIDERS } from 'angular2/http';

import { Vehicle, VehicleService } from './vehicle/service';
import { VehicleListComponent } from './vehicle-list.component';

@Component({
	selector: 'my-app',
	template: '<my-vehicle-list></my-vehicle-list>',
	directives: [VehcileListComponent],
	providers: [
		// declaring the providers
		HTTP_PROVIDERS,
		VehicleService
	]
})
export class AppComponent {}

@Injectable()
export class VehicleService {
	constructor(private _http: Htpp) {}

	getVehicles() {
		// make and return the async GET call
		return this._http.get('api/vehicles.json')
			// we map the response
			.map((response: Response) => <Vehicle[]>response.json().data)
			.catch(this.handleError);
	}

	// handle the exception. always!!
	private handleError(error: Response) {
		console.error(error);
		return Observable.throw(error.json().error || 'Server error');
	}
}

// Subscribing to the Observable

constructor(private _vehicleService: VehicleService) { }	
ngOnInit() { this.getHeroes(); }
getHeroes() {
	this._vehicleService.getVehicles()
		// subscribe to the observable
		.subscribe(
			// success an failure cases
			vehicles => this.vehicles = vehicles,
			error => this.errorMessage = <any>error
		);
}

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2'/http';
import { Observable } from 'rxjs/Rx';

export class Vehicle {
	constructor(public id: number, public name: string) {}

@Injectable()
export class VehicleService {
	constructor(private _http: Http) {}

	getVehicles() {
		return this._http.get('api/vehicles.json')
		.map((response: Response) => <Vehcile[]>response.json().data)
		.do(data => console.log.(data))
		.catch(this.handleError);
	}

	handleError(error: Response) {
		console.error(error);
		return Observable.throw(error.json().error || 'Server error');
	}
}
}
}

import { Component } from 'angular2/core';
import { Vehicle, VehicleService } from './vehcile.service';
import { VehicleComponent } form './vehicle.component';

@Component({
	selector: 'my-vehicle-list',
	templateUrl: 'app/vehicle-list.component.html',
	styles: ['li {cursoir: pointer;} .error {color:red;}'],
	directives: [vehicleComponent]
})
export class VehicleListComponent {
	errorMessage: string;
	vehicles: Vehicle[]:
	selectedVehicle: Vehicle;

	constructor(private _vehicleService: VehicleService) {}

	ngOnInit() { this.getHeroes(); }

	getHeroes() {
		this._vehicleService.getVehicles()
			.subcribe(
				vehicles => this.vehicles = vehicles,
				error => this.errorMessage = <any>error
			);
	}

	select(vehicle: Vehicle) {
		this.selectedVehicle = vehicle;
	}
}

import 'rxjs/Rx';
// for production, only import the modules you require

// vehicle.service.ts
return this._http.get('api/vehicles')
	.map((response:: Response) => 
		// json() is defined by the http spec
		// data is what we defined on the server
		<Vehicle[]>response.json().data
	)
	// catch errors
	.catch(this.handleError);

// vehicle-list.component.ts

vehicles: Observable<Vehicle[]>; // property becomes observable

getHeroes() {
	this.vehicles = this._vehicleService.getVehicles(); // set the observable from the Service
}

getVehciles(value? : stgring) {
	return this._http.get('api/vehcles.json')
		.map((response: Response) => <Vehicle[]>response.json().data)
		.toPromise()
		.catch(this.handleError);
}

export class VehicleListComponent {
	errorMessage: string;
	vehicles: Promise<Vehicle[]>; // <--
	selectedVehicle: Vehicle;

	constructor(private _vehcileServie: vehicleService) {}

	// ...
}

@RouteConbfig({})

RouteParams
// $routeParams in angular1

@RouteConfig([
// the name of the route must be PascalCase 
// Default route
{ path: '/', name: 'Vehicles', component: VehicleListComponent, useAsDefault: true},
// :id is a routing parameter
{ path: '/list/:id', name: 'Vehicles', component: VehicleListComponent },
{ path: '/:id', name: 'Vehicle', component: VehicleComponent }
])
export class VehiclesComponent {}

@Component({
	selector: 'story-vehicles',
	template: `<router-outlet></router-outlet>`,
	directives: [ROUTER_DIRECTIVES],
	providers: [VehicleService]
})

// app.component.ts

import { Component } from 'angular2/core';
import { HTTP_PROVIDERS, @RouteConfig } from 'angular2/http';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router'; // <--
import 'rxjs/Rx'; // load the full rxjs

import { CharacterListComponent } from './characters/character-list.component';
import { CharacterService } from './characters/character.service';
import { VehicleListComponent } from './vehicles/vehicle-list.component';
import { VehicleComponent } from './vehicles/vehicle.component';
import { VehicleService } from './vehicles/vehicle.service';
import { CONFIG } from './config';

@Compontent({
	selector: 'story-app',
	templateUrl: 'app/app.component.html',
	styles: [`
		nav ul {list-style-type: none;}
		nav ul li {padding: 4px; cursor: pointer; display: inline-block}
	`],
	directives: [ROUTER_DIRECTIVES],
	providers: [
		HTTP_PROVIDERS,
		ROUTER_PROVIDERS, // <--
		CharacterService,
		VehicleService
	]
})
@RouteConfig([ // <-- 
	{path: '/characters', name: 'Characters', component: CharacterListComponent, useAsDefault: true},
	{path: '/vehicles', name: 'Vehciles', component: VehicleListComponent},
	{path: '/vehicle/:id', name: 'Vehicle', component: VehicleComponent}
])
export class AppComponent{}