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;
}

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

<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'});

<head>
  <base href="/">
  ...
</head>

// set <base href>

// app/app.routing.ts

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: 'users', component: UsersComponent }
];

import { UsersComponent }  from './users.component';

export const routing = RouterModule.forRoot(appRoutes);

// app.module.ts

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

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


import { UsersComponent }    from './users.component';

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

import { routing } from './app.routing';

, routing

// navigation

@Component({
  ...
  template: `
    <div class="content">
      


      
    </div>
  `
})
export class AppComponent {}

<router-outlet></router-outlet>

<nav>
  <a routerLink="/users"                          >Users</a>
</nav>

routerLinkActive="active"

// users.routing.ts

import { Routes, RouterModule } from '@angular/router';

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

const usersRoutes: Routes = [
  {
    path: 'users',
    component: UsersComponent,
    children: [
      { path: ':id',  component: UserComponent },
    ]
  }
];

export const usersRouting = RouterModule.forChild(usersRoutes);

// users.module.ts

import { usersRouting } from './users.routing';

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

usersRouting

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

@Component({
  selector: 'users',
  ...
})
export class UsersComponent {

  

  


}

import { Router } from '@angular/router';

constructor(private router: Router ) { }

viewUser(user: User) {
  this.router.navigate(['/user', user.id]);
}

import { User } from './../user';

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

import { CanDeactivate } from '@angular/router';

@Component({
  selector: 'user',
  ...
})
export class UserComponent                           {


  


}

implements CanDeactivate

canDeactivate() {
  ...
}

const ROUTES = [
  {
    path: 'users',
    
  },
  {
    path: 'cars',
    
  }
];

@NgModule({
  ...
  bootstrap: [AppComponent],
  imports: [RouterModule.forRoot(ROUTES)]
})
class AppModule {}

loadChildren: 'users.bundle.js',

loadChildren: 'cars.bundle.js',

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 { }

import { FormsModule }   from '@angular/forms';

, FormsModule

// profile.component.html

<form>
  <div class="form-group">
    <label for="fName">First name</label>
    <input type="text" id="fName" required                             >
  </div>
  <div class="form-group">
    <label for="lName">Last name</label>
    <input type="text" id="lName"                               >
  </div>
  <button type="submit" class="btn btn-default">Save</button>
</form>

@Component({
  selector: 'profile',
  templateUrl: 'profile.component.html',
  ...
})
export class ProfileComponent { }

// profile.component.ts

[(ngModel)]="user.firstName"

[(ngModel)]="user.lastName"

<form>
  ...
  <div class="form-group">
    <label for="fName">First name</label>
    <input type="text" id="fName" required
       [(ngModel)]="user.firstName"                  >
  </div>
  



</form>

// #fName is a reference to a DOM element within template

#fName="ngModel"

<div [hidden]="fName.valid || fName.pristine" class="alert alert-danger">
  First name is required
</div>

<form                                               >
  <div class="form-group">
    <label for="fName">First name</label>
    <input type="text" id="fName" required
           [(ngModel)]="user.firstName">
  </div>
  ...
  <button type="submit" class="btn btn-default"
                                               >Save</button>
</form>

(ngSubmit)="onSubmit()"

#profileForm="ngForm"

[disabled]="!profileForm.form.valid"

// ngForm directive is added to each form by Angular

// 'Aug 23, 2016'
<p>Last login: {{ user.lastLogin | date }}</p>

// 'Aug 23, 2016, 9:45:15 PM'
<p>Last login: {{ user.lastLogin | date:'medium' }}</p>

// '9:45:15 PM'
<p>Last login: {{ user.lastLogin | date:'shortTime' }}</p>

// '45:15'
<p>Last login: {{ user.lastLogin | date:'mmss' }}</p>

• DatePipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'ToSeconds' })
export class ToSecondsPipe implements PipeTransform {

  transform(value: number): number {
    // translate milliseconds to seconds
    return Math.round(value / 1000);
  }
}

angular
  .module('myApp')
  .component('userProfile', {
    
    
    



  });

templateUrl: 'userProfile.component.html',

controller: UserProfileController,

class UserProfileController {
  ...
}

bindings: {
  user: '<', // one-way binding (input)
  onSelect: '&' // event callback (output)
}

$stateProvider
  .state('root', {
    url: '/users',
    component: 'Users',
    




  });

angular
  .module('myApp')
  .component('users', {
    bindings: {
      users: '<'
    }
  });

// resolved bindings pass automatically

resolve: {
  users: function(UsersService) {
    return UsersService.getUsers();
  }
}

a1

a1

a1

a2

a2

a2

import { UpgradeAdapter } from '@angular/upgrade';

import { UserProfileComponent } from './user-profile.component';

angular
  .module('myApp')
  .directive('userProfile',
    
  );

UpgradeAdapter.downgradeNg2Component(UserProfileComponent));

import { UpgradeAdapter } from '@angular/upgrade';

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

const UserAvatar = UpgradeAdapter.upgradeNg1Component('userAvatar');

@Component({
  selector: 'user-profile',
  template: `
    <div>
      <user-avatar></user-avatar>
    </div>
  `,

})
export class UserProfileComponent { }

directives: [UserAvatar]