Recap & Terminology

AngularJS SITREP

AngularJS 1.7 LTS Support

  1. A security flaw is detected in the 1.7.x branch of the framework
  2. One of the major browsers releases a version that will cause current production applications using AngularJS 1.7.x to stop working
  3. The jQuery library releases a version that will cause current production applications using AngularJS 1.7.x to stop working.

Introducing Angular

A complete redesign and rewrite of AngularJS.

Key Changes and Additions

Lazy Loading

const routes: Routes = [
  { path: '',
    component: WelcomeComponent
  }, {
    path: 'staff',
    resolve : {startup : EgBaseResolver},
    loadChildren: './staff/staff.module#EgStaffModule'
  }
];

Integrated I18N

<h1 i18>Hello i18n!</h1>
<h1 i18n="Section welcome header">Hello i18n!</h1>
<h1 i18n="welcome|Section welcome header">Hello i18n!</h1>

<eg-confirm-dialog
  i18n-dialogTitle
  i18n-dialogBody
  dialogTitle="Workstation Exists"
  dialogBody='Workstation "{{newName}}" already exists.  Use it anyway?'>
</eg-confirm-dialog>

Integrated I18N

I18N XLIFF Sample

<trans-unit id="ac0e8358232537233600051cfca69a2e0e1ba1d7" datatype="html">
  <source>
    Welcome to Webby, <x id="INTERPOLATION" equiv-text="{{name}}"/>
  </source>
  <context-group purpose="location">
    <context context-type="sourcefile">app/welcome.component.ts</context>
    <context context-type="linenumber">2</context>
  </context-group>
  <note priority="1" from="description">Home page welcome message</note>
  <note priority="1" from="meaning">welcome</note>
</trans-unit>

More I18N On the Horizon

In v6 we will release runtime i18n: one bundle for all locale, translations resolved at runtime, and maybe code translations if we have the time (otherwise it’ll come soon after).
https://github.com/angular/angular/issues/11405
— ocombe

Skipping Template Toolkit?

RxJS

this.net.request(...).subscribe(
    result => console.log(`got a result: ${result}`),
    error  => console.error(`got error ${error}`),
    ()     => console.log('All done')
);

TypeScript

TypeScript Fun: Classes

export class Animal {
    color: string;
    constructor(color: string) {
        this.color = color;
    }
    sayColor() {console.log(this.color)}
}
export class Ocelot extends Animal{
}

let o = new Ocelot('orange');
o.sayColor();

TypeScript Fun: Interfaces

interface SomeParams {
    name:   string,
    email?: string, // optional
    valid:  boolean
}
search(params: SomeParams) {...}

// client
search({name: 'jane', valid: true});

Other Changes… Bootstrap v4

Exploring ng5

Ng5 App Demo

Note
This server will be alive for ~1 month.

Migrating to ng5

Migration Goals

Strategies for Migrating to ng5

Inline Replacement

Inline Replacement: Challenges

Inline Replacement: Challenges Continued

Parallel Migration

Parallel Migration v1: Shared Code

Shared Parallel: Challenges

Parallel Migration v2: No Code Sharing

Unshared Parallel: Challenges

Other Migration Tasks

Decisions

Possible Migration Plan

Questions