_________________________________________________________________________________

npm WARN saveError ENOENT: no such file or directory, open '/Users/cosmi/Documents/angular_April14/package.json'

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN enoent ENOENT: no such file or directory, open '/Users/cosmi/Documents/angular_April14/package.json'

npm WARN angular_April14 No description

npm WARN angular_April14 No repository field.

npm WARN angular_April14 No README data

npm WARN angular_April14 No license field.

References

https://medium.baqend.com/angular-2-by-example-e85a09fa6480

Angularjs vs Angular

SPEED - faster

COMPONENTS instead of controllers and scopes

SIMPLER DIRECTIVES

INTUTIVE DATA BINDING

SIMPLER SERVICES

WAYS TO WRITE

TYPESCRIPT > JS

BABEL >JS

http://typesrcriptlang.org

http://go.codeschool.com/angularstart

COMPONENT IS THE BASIC BUILDING BLOCK OF ANGULAR APPLICATIONS

@import {Component} from '@angular/core';

class {Component} from '@angular/core'

In order to run application we need root module

import{NgModule, Component} from '@angular/core';

@Component({

selector: 'my-app',

template:'Ultra Racing'

})

class Component {

}

The over all flow

Each component can consist of :

class file

html file

css file

NOTE: IN TYPESCRIPT

class Component {

title ='Ultra Racing'

}

Inside a typescript class , we dont use the var or let keywords to declare class properties

@Component({

selector: 'my-app',

template:'

{{

title}}

'})

class Component {

title =Ultra Racing

}

Accessing objects inside component

Level 2
Template Traction

Structural Directives

2.1 Structural Directives

2.2 Building Blocks

2.3 Differences

2.4 Looping

2.5 Conditionals

2.6 Directive Types

Pipes & Component Methods

2.7 Pipes & Component Methods

2.8 Pipes

2.9 Methods

ngIf & ngFOR

class Component{]

totalCost() { let sum = 0; for (let race of this.races){ if(race.isRacing) { sum += race.entryFee; } } return sum; }

STEP 1: IMPORT THE CLASSES THAT YOU WISH TO USE:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { RacesComponent } from './races.component';

STEP 2: DEFINE NG-MODULE:

@NgModule({

imports: [ BrowserModule ],

declarations: [ AppComponent,RacesComponent ],

bootstrap: [ AppComponent ]

})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

------------------------------------------------------------------------------------

import { Component } from '@angular/core';

@Component({

selector: 'my-races',//the directive name with which it will be included in html

template: `

Cash left to enter races: {{cashLeft() |
currency:'USD':true}}

*ngFor="let race of races">

*ngIf="race.isRacing">Already Racing

Total cost: {{totalCost() | currency:'USD':true}}`})

export class RacesComponent {
heading = "Ultra Racing Schedule"
cash = 10000;
races = [{
"id": 1,
"name": "Daytona Thunderdome",
"date": new Date('2512-01-04T14:00:00'),
"about": "Race through the ruins of an ancient Florida battle arena.",
"entryFee": 3200,
"isRacing": false
}, {
"id": 2,
"name": "San Francisco Ruins",
"date": new Date('2512-07-03T20:00:00'),
"about": "Drift down the streets of a city almost sunk under the ocean.",
"entryFee": 4700,
"isRacing": true
}, {
"id": 3,
"name": "New York City Skyline",
"date": new Date('2512-07-12T21:00:00'),
"about": "Fly between buildings in the electronic sky.",
"entryFee": 4300,
"isRacing": true
}];

totalCost() {
let sum = 0;
for (let race of this.races) {
if (race.isRacing) sum += race.entryFee;
}
return sum;
}

cashLeft() {
return this.cash - this.totalCost();
}

}
---------------------------------------------------------------------------------------
import { Component } from '@angular/core';

@Component({
selector: 'racing-app',
template: `

my-races
`
})
export class AppComponent {
heading = "Ultra Racing Schedule"

}

____________________________________________________________________________________

app.component.races.ts

import { Component } from '@angular/core';

How to

@Component({

  selector: 'my-races',

  templateUrl:'app/races.component.html',

  styleUrls['app/races.component.css'];

})

export class RacesComponent {

heading = "Ultra Racing Schedule"

cash = 10000;

races = [{

"id": 1,

"name": "Daytona Thunderdome",

"date": new Date('2512-01-04T14:00:00'),

"about": "Race through the ruins of an ancient Florida battle arena.",

"entryFee": 3200,

"isRacing": false

}, {

"id": 2,

"name": "San Francisco Ruins",

"date": new Date('2512-07-03T20:00:00'),

"about": "Drift down the streets of a city almost sunk under the ocean.",

"entryFee": 4700,

"isRacing": true

}, {

"id": 3,

"name": "New York City Skyline",

"date": new Date('2512-07-12T21:00:00'),

"about": "Fly between buildings in the electronic sky.",

"entryFee": 4300,

"isRacing": true

}];

totalCost() {

let sum = 0;

for (let race of this.races) {

if (race.isRacing) sum += race.entryFee;

}

return sum;

}

cashLeft() {

return this.cash - this.totalCost();

}

}

app.component.races.html

Cash left to enter races: {{cashLeft() | currency:'USD':true}}

{{race.name}} {{race.entryFee | currency:'USD':true}}

{{race.date | date:'MMM d, y, h:MM a'}}

{{race.about}}

Already Racing

Total cost: {{totalCost() | currency:'USD':true}}

app.component.races.css

h2 {

  color: green;

}

p {

  font-size: small;

}

____________________________________________________________________________________

MOCKS AND MODELS

Level 3
Tuning It Up

Splitting to Two Components

Component HTML & CSS

Mocks & Models

______________________________________________________________________________

Step1 Define mock defintion: race.ts

export class Race {
id: number;
name: string;
date: Date;
about: string;
entryFee: number;
isRacing: boolean;
}

______________________________________________________________________________

Step2 : Move data to mock.ts

import { Race } from './race';

export const RACES: races[]=[{
"id": 1,
"name": "Daytona Thunderdome",
"date": new Date('2512-01-04T14:00:00'),
"about": "Race through the ruins of an ancient Florida battle arena.",
"entryFee": 3200,
"isRacing": false
}, {
"id": 2,
"name": "San Francisco Ruins",
"date": new Date('2512-07-03T20:00:00'),
"about": "Drift down the streets of a city almost sunk under the ocean.",
"entryFee": 4700,
"isRacing": true
}, {
"id": 3,
"name": "New York City Skyline",
"date": new Date('2512-07-12T21:00:00'),
"about": "Fly between buildings in the electronic sky.",
"entryFee": 4300,
"isRacing": true

}];
______________________________________________________________________________

@Component({
selector: 'my-races',
templateUrl: 'app/races.component.html',
styleUrls:['app/races.component.css']
})
export class RacesComponent {
heading = "Ultra Racing Schedule"
cash = 10000;
races: Race[];
ngOnInit(){
this.races = RACES;
}

totalCost() {
let sum = 0;
for (let race of this.races) {
if (race.isRacing) sum += race.entryFee;
}
return sum;
}

cashLeft() {
return this.cash - this.totalCost();
}

}

______________________________________________________________________________

TEMPLATE

Cash left to enter races: {{cashLeft() | currency:'USD':true}}

*ngFor

="let race of races">

{{race.date | date:'MMM d, y, h:MM a'}}
{{race.about}}

="!race.isRacing">Enter Race

*ngIf

="race.isRacing">Already Racing

Total cost: {{totalCost() | currency:'USD':true}}

______________________________________________________________________________

CSS FILE

h2 {
color: green;
}
p {
font-size: small;

}

______________________________________________________________________________

Step3:Convert mock.ts on to

Lastly, we need to set the races in our RacesComponent equal to the RACESmock. You know, inside the ngOnInit().

_____________________________________________________________________________

Level 4
Data Binding Boost

Property & Class Binding

Event Binding

Two-way Binding

What is property binding ?

Property binding allows us to bind component properties to any DOM element properties.
Any update to the component property value will update the DOM property ,but not vice versa - that's when it's one-way binding
Class binding allows us to specify a CSS class to add to DOM element if a component property is true

Adding image to template

How to add featured class?

export let CARPARTS: CarPart[]=[{

id:1,

"featured":false

},{

id:1,
"featured":true

},{

id:1,
"featured":false

}];

export class CarPart{

image :string

featured:boolean

}

________________________________________________________________________________

race.component.html

Cash left to enter races: {{cashLeft() | currency:'USD':true}}

When you run an Angular application ,it creates a dependency injector.An injector is in charge of knowing how to create and send things.

Service fuel injection

Race

Level 5
Service Fuel Injection

Services

Http

________________________________________________________________________________

app/race.service.ts

import { RACES } from './mocks';
import { Injectable } from '@angular/core';

@Injectable()
export class RaceService {
  getRaces() {
    return RACES;
  }
}

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RacesComponent } from './races.component';
import { RaceService } from './race.service';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  providers: [ RaceService ],
  bootstrap: [ AppComponent ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

app/races.component.ts

import { Component } from '@angular/core';
import { Race } from './race';
import { RaceService } from './race.service';

@Component({
  selector: 'my-races',
  templateUrl: 'app/races.component.html',
  styleUrls:['app/races.component.css']
})
export class RacesComponent {
  heading = "Ultra Racing Schedule"
  cash = 10000;
  races: Race[];

  constructor(private raceService: RaceService) { }

  ngOnInit() {
    this.races = this.raceService.getRaces();
  }

  totalCost() {
    let sum = 0;
    for (let race of this.races) {
      if (race.isRacing) sum += race.entryFee;
    }
    return sum;
  }

  cashLeft() {
    return this.cash - this.totalCost();
  }

  enterRace(race) {
    if (this.cashLeft() > race.entryFee) {
      race.isRacing = true;
    } else {
      alert("You don't have enough cash");
    }
  }

  cancelRace(race) {
    race.isRacing = false;
  }

}