New Data

Architecture

in Angular 2

by Gerard Sans | @gerardsans

Google Developer Expert

Master of Ceremonies

International Speaker

Angular 2 Trainer

Community Leader

800

500

AngularConnect - 27-28th Sept

@AngularConnect

Angular 2

Features

  • Latest Web Standards
  • Simple
  • Lightning fast
  • Works everywhere

ES5, ES6 and TypeScript

ES5 / ES6 / TypeScript

ES6 (ES2015)

  • Classes, modules, arrow functions

TypeScript

  • Types, annotations, generics, interfaces
  • Great editor support

Angular 2 Tooling

Angular 2 Tooling

Bootstrapping

Bootstrapping

  • Angular Application instantiation
  • Root Module (AppModule) 
  • Global Dependencies
    • Router, Http​, Services
    • Global Values
    • Vendor dependencies

index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Polyfill(s) for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.17?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>System.import('app');</script>
  </head>
  <body>
    <my-app>
      Loading...
    </my-app>
  </body>
</html>

main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

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

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

app.component.ts

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

@Component({
  selector: 'my-app', // <my-app>Loading...</my-app>
  template: `...`
})
export class App { 
  constructor() { }
}

Components

Components Tree

source: blog

Component

  • @Component annotation
  • Communications
    • Inputs, @Input
    • Outputs, @Output
  • Component Lifecycle Hooks
  • Host element interaction

Component

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

@Component({
  selector:    'home', // <home></home>
  styles:      [`h1 { color: red }`],
  template:    `<h1>Home</h1>`
})
export class Home { ... }

Lifecycle Hooks

import { Component, OnChanges, OnInit, OnDestroy } from '@angular/core';

@Component()
export class myComponent implements OnChanges, OnInit, OnDestroy { 
  /* 1 */ constructor() { }

  // called when an input or output binding changes
  /* 2 */ ngOnChanges(changes) { }   
  
  // after child initialisation
  /* 3 */ ngOnInit() { } 
  
  // just before is destroyed
  /* 4 */ ngOnDestroy() { } 
}

Templating

Template Syntax

Syntax Binding type
<h1>{{title}}</h1>
<input [value]="firstName">
<li [class.active]="isActive"></li>
<div [style.width.px]="mySize">
Interpolation
Property
Class
Style
<button (click)="onClick($event)"> Event
[(ngModel)]="data.value" Two-way

Reactive Extensions

RxJS 5

beta12

1

2

3

Stream

Observable

//Observable constructor
let simple$ = Rx.Observable.create(observer => {
  try {
    //pushing values
    observer.next(1);
    observer.next(2);
    observer.next(3);

    //complete stream
    observer.complete();
  }
  catch(e) {
    //error handling
    observer.error(e);
  }
});

Subscribe

/*
a$ ---1---2---3|
*/

let a$ = Rx.Observable.of(1,2,3);

let subscription = a$.subscribe({
  next:  x => console.log(x),
  error: x => console.log('#'),
  complete: () => console.log('|')
});

Unsubscribe

let subscription = twits$.subscribe(
  twit => feed.push(twit),
  error => console.log(error),
  () => console.log('done')
);

setTimeout(() => subscription.unsubscribe(), 5000);

Example

Rx.Observable.of(1)
  .subscribe({
    next: x => console.log(x),
    complete: () => console.log('3') 
  });
console.log('2');

// a) 1 2 3
// b) 2 1 3
// c) 1 3 2
// d) 3 2 1

Schedulers

Observable.of(1)
  .subscribeOn(Rx.Scheduler.async)
  .subscribe({
    next: (x) => console.log(x),
    complete: () => console.log('3') 
  });
console.log('2');

// a) 1 2 3
// b) 2 1 3
// c) 1 3 2
// d) 3 2 1

Why Observables?

  • Flexible: sync or async
  • Powerful operators
  • Less code

RxJS 5 in Angular2

  • Asynchronous processing
  • Http
  • Forms: controls, validation
  • Component events
    • EventEmitter

Http Module

Main Features

  • Primary protocol for client/server communications
  • Implements XMLHttpRequest (XHR) and JSONP
  • Http methods:  GET, POST, PUT, DELETE, PATCH and HEAD

Creating a Http Service

// app.module.ts
import { HttpModule }  from '@angular/http';
@NgModule({ 
  imports: [HttpModule], ... 
})
export class AppModule {}

Creating a Http Service

// usersService.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class UsersService {
  constructor(private http: Http) { }
  get() {
    return this.http.get('/assets/users.json')
      .map(response => response.json().users)
      .retryWhen(errors => errors.delay(2000));
  }
}

Consuming a Http Service

import { Component } from '@angular/core';
import { UsersService } from '../services/usersService';

@Component({
  selector: 'users',
  template: `<h1>Users</h1>
    <tr *ngFor="let user of userslist | async">
      <td>{{user.username}}</td>
    </tr>`
})
export class Users {
  private userslist;
  
  constructor(users: UsersService) {
    this.userslist = users.get();
  }
}

Data Architecture

Unidirectional Data Flow

source: blog

Overview

Дякую

Thanks

New Data Architecture in Angular 2 (RC6)

By Gerard Sans

New Data Architecture in Angular 2 (RC6)

Angular 2 introduces a new Data Architecture based on Reactive Programming using RxJS 5. We are really excited to see the new approach using Observable sequences aka Observables. We will cover a basic introduction of Angular 2 followed by RxJS 5 and the new HTTP API covering some basic use cases.

  • 2,885
Loading comments...

More from Gerard Sans