ES5

ES6

TS

DART

class Car {

  



  




}

public brand: string;
public number: number;
public isCarNew: boolean;

constructor(brand: string, number: number, isCarNew: boolean){
  this.brand = brand;
  this.number = number;
  this.isCarNew = isCarNew;
}

class Car {

  



  






}

constructor(public brand: string,
            public number: number,
            public isCarNew: boolean) { }

getCarNumber(): number {
  return this.number;
}

setCarNumber(newNumber: number): void {
  this.number = newNumber;
}

class FerrariFF {

  public model: string = 'FF';

}

function paint(color: string) {
  return function(targetClass) {
    return class {
      model = new targetClass().model;
      color = color;
    }
  }
}

@paint('red')

console.log(new FerrariFF());

// {model: 'FF', color: 'red'}

App component (cmp)

cmp 1

cmp 2

cmp 3

cmp 4

A tree of components

component

template

DIREctive

property binding

Event binding

injector

Service

app module

my module

@Component({
  
  
  

})
export class MyCardComponent {

}

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

selector: 'my-card',

templateUrl: 'my-card.component.html',
styleUrls: ['my-card.component.css']

moduleId: module.id,

<p>Hello, my name is {{ user.firstName }}</p>

<p>Hello, my name is {{ getUserFistName() }}</p>

// one-way binging (data source => view target)

<user-profile [user]="user"></user-profile>

[target]="expression"

// one-way binging (target => data source)

(target)="statement"

<my-card (click)="select()"></my-card>

// two-way binging (data source <=> view target)

[(target)]="expression"

<input type="text" [(ngModel)]="user.firstName">

• ngClass

• ngStyle

• ngIf

• ngFor

• ngSwitch

// notice asterisk (*) symbol

<li *ngFor="let user of users">{{user.fullName}}</li>

<user-profile *ngFor="let user of users" [user]="user">

  <user-fullname>{{ user.fullName }}</user-fullname>
</user-profile>

// toggle one class

<div [class.cool]="isCool">This div is cool</div>

setClasses() {
  let classes =  {
    bordered: this.isBordered,
    blue: this.isBlue
  };
  return classes;
}

// toggle multiple classes

<div [ngClass]="setClasses()">
  This div is bordered and blue
</div>

application

users

user

user

cards

[users]="appUsers"

[user]="users"

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

@Component({
  moduleId: module.id,
  selector: 'user',
  templateUrl: 'user.component.html',
  styleUrls: ['user.component.css']
})
export class UserComponent {
  
 
}

, Input

// user.component.html

<div class="fullName">{{ user.fullName }}</div>

@Input() user;

application

users

user

user

cards

(select)="onSelect()"

(select)="onSelect()"

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

@Component({
  moduleId: module.id,
  selector: 'user',
  templateUrl: 'user.component.html',
  styleUrls: ['user.component.css']
})
export class UserComponent {
  
 


}

, Output, EventEmitter

// users.component.html

@Output() select = new EventEmitter();

onSelect() { this.select.emit(...); }

<user (select)="onSelected()"></user>

// users.component.html

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


@Component({
  moduleId: module.id,
  selector: 'users',
  templateUrl: 'users.component.html',
  styleUrls: ['users.component.css'],
  
})
export class UsersComponent {

}

import { UserComponent } from './../user.component';

directives: [UserComponent]

<div>
  <user [user]="user"></user>
</div>

deprecated!

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

@Component({
  moduleId: module.id,
  selector: 'my-card',
  templateUrl: 'my-card.component.html',
  styleUrls: ['my-card.component.css']
})
export class MyCardComponent                   {

  

​
}

, OnInit

implements OnInit

ngOnInit() {
  ...
}

app module

http module

forms module

Users module

Auth module

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

@NgModule({
  imports:      [ ... ], // other modules
  declarations: [ ... ], // components, directives, pipes
  exports:      [ ... ], // components, directives, pipes
  providers:    [ ... ]  // services
})
export class MyModule { }

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

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

@NgModule({
  imports:      [ HttpModule, FormsModule, AuthModule ],
  declarations: [ UserComponent, StatusPipe ],
  exports:      [ UserComponent ],
  providers:    [ UserService ]
})
export class UsersModule { }

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { AuthModule } from './../auth/auth.module';
import { UserComponent } from './user.component';
import { UserService } from './user.service';
import { StatusPipe } from './status.pipe';

import { IUser } from './../users/user';

export class UsersService {

  
  
  getUsers() {
    ...
  }

  updateUser(user: IUser) {
    ...
  }
}

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

@Injectable()

import { AuthService } from './../../auth/auth.service';

constructor(private auth: AuthService) { }

// visible for all components inside this module

import { UserService } from './../users/user.service';

@NgModule({
  imports:      [ ... ],
  declarations: [ ... ],
  exports:      [ ... ],
  providers:    [ UserService ]
})
export class UsersModule { }

// visible only for this component and its children

import { UserService } from './../users/user.service';

@Component({
  selector: 'my-card',
  providers: [ UserService ]
})
export class MyCardComponent { }

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [ HttpModule ],
  declarations: [ ... ],
  providers: [ ... ],
  bootstrap: [ ... ]
})
export class AppModule { }

class UsersService {
  private usersUrl: string = 'api/v1/users';

  constructor(private http: Http) { }

  getUsers() {
    return this.http.get(this.usersUrl)
      .toPromise()
      .then(response => response.json().data)
      .catch(this.handleError);
  }

  private handleError(error: any) { ... }
}

import { Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Http          }     from '@angular/http';
import 'rxjs/add/operator/toPromise';

class UsersService {
  private usersUrl: string = 'api/v1/users';

  constructor(private http: Http) {}

  createUsers(user: User) {
    
    return this.http.post(
        this.usersUrl,
        JSON.stringify(user),
        {headers: headers})
      .toPromise()
      .then(response => response.json().data)
      .catch(this.handleError);
  }
}

, Headers

let headers = new Headers({'Content-Type': 'application/json'});