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.i o

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 on YouTube Live
- Tech Talks
- Discussions
Inspired by AngularAir
Call for speakers of #1!!
- Go to #on-air channel on Slack!

Angular v5.0

about me

Angular Overview

Angular

Angular Web Standards

Component definition

Template Syntax (1)

Template Syntax (2)

Angular CLI

High Performance

Official Packages

TypeScript

Language Service

Semantic Versioning

Time-base Release

Angular v5.0

What’s new?​

Animations

:increment / :decrement

Disable animations

Negative Query Limit

Router

ChildActivationStart/End

ActivationStart/End

Forms

updateOn

Core

Multiple exportAs

Bootstrap with Custom Zone

Http

Object map for HttpClient

Platform Server

TransferState

BEFORE_APP_SERIALIZED

Service Worker

Compiler

v5 Deprecation

v5 Removal

v5 Breaking Changes

Import locales/Ja

Use deprecated I18N pipes

Other Updates

Angular Material

Material Beta.12

Angular CLI

Angular CLI Updates

Documentation

angular.io

next.angular.io

v4.angular.io

How to learn Angular?

Learn Angular

Watch CHANGELOG

Read Release Note

Read Release Note

Join communities

Conclusion

ng-japan OnAir

ng-japan OnAir

Thanks!

What’s new?