Angular v5.0

@laco2net

2017-10-10 ng-japan Meetup

about me

• 稲富 駿 (laco)
• Kaizen Platform
• ng-japan Organizer
• Angular Contributor

Why is Angular popular?

Angular Overview

Angular

• Web Standards
• Simple
• Easy
• Fast
• Full-stack
• Powered by

Angular          Web Standards

• ECMAScript 2015+
• ES Modules 
• Web Animations API
• Web Components
• ES Proposal
  • Decorators
  • Observables
  • Zones

Component definition

@Component({
    selector: "app-profile",
    template: "<p>Name: {{ name }}</p>"
})
class ProfileComponent {
    @Input() name: string;
}

<div>
    <app-profile name="laco"></app-profile>
</div>

Template Syntax (1)

Data-Binding: [prop]

@Component({
    template: `
    <input [value]="name"> 
    <div [attr.role]="role"></div>
    <div [class.large]="isLarge"></div>
    <div [style.width.px]="mySize"></div>
    `
})
class MyComponent {
    name = "laco";
    role = "main"
    isLarge = true;
    mySize = 16;
}

Template Syntax (2)

Event Handling: (event)

@Component({
    template: `
    <button (click)="onClick($event)">
    `
})
class MyComponent {
    onClick(e: MouseEvent) {
    }
}

Angular CLI

# Install Angular CLI
> npm install -g @angular/cli

# Create new app
> ng new hello-angular

# Test
> ng test

# Build
> ng build --prod

# Debug
> ng serve 

Easy to develop Angular apps

High Performance

• Smart Change Detector
  • Code Generation
    • 100k checks / 10ms
  • Reduce detection
    • Triggered by Zone.js
• Smart Renderer
  • Reduce DOM manipulations

Official Packages

• @angular/core

• @angular/common

• @angular/forms

• @angular/http

• @angular/router

• @angular/material

• @angular/platform-server

• @angular/service-worker

• @angular/language-service

• ...

TypeScript

• Static Type

• Decorators

• Type-base Dependency Injection

• Language Services

Language Service

Types in the template

Semantic Versioning

Angular x.y.z

• x: major

  • Update can contain breaking changes

• y: minor

  • Update cannot breaking changes

• z: patch

  • Only bug fix

Time-base Release

• Every weak: patch update

• Every month: minor update

• Every 6 months: major update

Angular v5.0

What’s new?​

Animations

• :increment / :decrement​
  • New Transition Aliases

• [@anim.disabled]

  • Disable Animations by data-binding

• Negative Query Limit

  • Count from tail

:increment / :decrement

@Component({
    animations: [
        trigger("counter", [ 
            transition(':increment', [ /*...*/ ]),
            transition(':decrement', [ /*...*/ ]),
        ])
    ],
    template: `
    <span [@counter]="count">
    `
})
class MyComponent() { 
    count = 1;
}

Disable animations

@Component({
    animations: [
        trigger("anim", [ /* ... */])
    ],
    template: `
    <div [@anim]="prop" [@anim.disabled]="animationDisabled">
    `
})
class MyComponent() { 
    prop = '';
    animationDisabled = false;
}

Negative Query Limit

trigger("anim", [
    transition(":enter", [
        query(
            ".item", 
            [ /** ... **/ ],
            { limit: -5 }
        )
    ])
])

Router

• New Route Events
  • ChildActivationStart
  • ChildActivationEnd
  • ActivationStart
  • ActivationEnd

ChildActivationStart/End

router.events
    // Event = RouteEvent | RouterEvent
    .filter(e => e instanceof RouteEvent)
    .subscribe(e => {
        if (e instanceof ChildActivationStart) {
            spinner.start();
        } else if (e instanceof ChildActivationEnd) {
            spinner.end()
        }
    });

ActivationStart/End

router.events
    // Event = RouteEvent | RouterEvent
    .filter(e => e instanceof RouteEvent)
    .subscribe(e => {
        if (e instanceof ActivationStart) {
            spinner.start();
        } else if (e instanceof ActivationEnd) {
            spinner.end()
        }
    });

Forms

• updateOn
  • Control trigger to update
  • 'blur' | 'submit' | 'change'

updateOn

<form [ngFormOptions]="{updateOn: 'change'}">
    <input name="foo" 
        [(ngModel)]="foo"
        [ngModelOptions]="{updateOn: 'blur'}">
    <input name="bar" 
        [(ngModel)]="bar"
        [ngModelOptions]="{updateOn: 'submit'}">
</form>

Core

• Multiple 'exportAs'
• Bootstrap with Custom Zone

Multiple exportAs

@Directive({
    selector: 'sushi-maguro',
    exportAs: 'maguro, tuna'
})
export class LacoDirective {}

`
<sushi-maguro' #maguro="maguro" #tuna="tuna">
  <!-- maguro === tuna -->
</sushi-maguro'>
`

Bootstrap with Custom Zone

platformBrowserDynamic()
    .bootstrapModule(AppModule, {
        ngZone: 'zone.js' // or 'noop' or Custom NgZone
    })

https://stackblitz.com/edit/angular-m1bktf?file=app%2Fapp.component.ts

Http

• Object map for HttpClient headers & params

Object map for HttpClient

http.get("/api", {
    headers: {
        "X-MY-HEADER": "header"
    },
    params: {
        "foo":  "bar"
    },
})

Platform Server

• TransferState / BrowserTransferStateModule
  • Data from server to browser
• Render Hooks
  • Callback on serialization

TransferState

const COUNTER_KEY = makeStateKey<number>('counter');

@Component({...})
export class TransferStateComponent {
  counter = 0;
  constructor(@Inject(PLATFORM_ID) private platformId: {}, 
    private transferState: TransferState) {}

  ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      this.counter = 5;
      this.transferState.set(COUNTER_KEY, 50);
    } else {
      this.counter = this.transferState.get(COUNTER_KEY, 0);
    }
}

BEFORE_APP_SERIALIZED

@NgModule({
  bootstrap: [MyServerApp],
  declarations: [MyServerApp],
  imports: [
    BrowserModule.withServerTransition({appId: 'render-hook'}), 
    ServerModule
  ],
  providers: [
    {
       provide: BEFORE_APP_SERIALIZED, 
       useFactory: getTitleRenderHook, 
      multi: true, deps: [DOCUMENT]},
  ]
})
class RenderHookModule {}

Service Worker

• Rewritten in angular/angular
  • @angular/service-worker
  • @angular/service-worker/config
  • @angular/service-worker/cli
  • @angular/service-worker/worker
• experimental feature

Compiler

• Incremental AoT
  • ngc --watch
  • Powered by TypeScript Custom Transformer

v5 Deprecation

• @angular/http

  • Superseded by HttpClient

v5 Removal

• Core

  • Drop <template> Support

  • Drop OpaqueToken

• Router
  • Drop initialNavigation: true | false
    • Use 'enable' | 'disable'
• Common
  • Drop NgFor directive
    • Use NgForOf: <ng-template ngForOf>
    • No effects to *ngFor

v5 Breaking Changes

• Require TypeScript >=2.4.x

• Common Pipes using Intl API

  • Drop dependency on Intl

    • Buggy and inconsistent in cross browsers
• Switch to Common Locale Data Repository (CLDR)
  • Bundle locale data in @angular/common/locales
  • Only en_US is enabled by default
  • Import locales on demand
• Some formats are changed
  • See documentation

Import locales/Ja

import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';

registerLocaleData(localeJa);

Use deprecated I18N pipes

import {
    CommonModule, 
    DeprecatedI18NPipesModule
} from '@angular/common';

@NgModule({
    imports: [
        CommonMudule,
        DeprecatedI18NPipesModule,
    ]
})
export class AppModule {}

Other Updates

Angular Material

http://material.angular.io

Material Beta.12

• md* => mat*

  • ​use angular-material-prefix-updater w/ beta.11

    • $ mat-switcher --help

• Drop all-in-one MaterialModule

• MatInputModule

  • <md-input-container> => <mat-form-field>

• All* Components use OnPush

Angular CLI

• Scaffold Angular project
• Generate code
• Debug
• Test
• Lint
• Deploy

http://cli.angular.io

Angular CLI Updates

• --build-optimizer (v1.3) => default in v1.5

  • Optimize AoT-generated code

• platform-server support (v1.3)

  • Build app for Node.js

• Custom Template (v1.4)

  • Schematics: Scaffolding Tool by Angular Team

    • Default templates: @schematics/angular

  • --collection option to choose schematics package

• ES2015 Support (v1.5)

  • tsconfig.compilerOptions.target

Documentation

angular.io

https://angular.io

next.angular.io

https://next.angular.io

v4.angular.io

https://v4.angular.io

How to learn Angular?

Learn Angular

• Read angular.io

  • ​Official documentation

• Use Angular CLI

  • Follow the Best Practice

Watch CHANGELOG

Read Release Note

blog.angular.io

Read Release Note

https://medium.com/angular-japan-user-group/

Join communities

slack-invite.ngjapan.org

Conclusion

• Angular is a Platform for Developer Experience

• v5 Updates

  • Some new features and removal

  • Breaking changes on I18N pipes 

• How to learn Angular

  • Read angular.io

  • Use Angular CLI

  • Follow the Best Practice

  • Keep an eye on changes

ng-japan OnAir

ng-japan OnAir

• ng-japan on YouTube Live
  • Tech Talks
  • Discussions
• Inspired by AngularAir
• Call for speakers of #1!!
  • Go to #on-air channel on Slack!

Thanks!