Angular 2 Upgrade with Manfred Steyer at Developer Week 2016

Approaches

  • Vogel-Strauss-Strategie or “Ostrich tactic”: Don’t do anything. Keep using AngularJS 1.x
  • Microservice – Technology per Module: Module 1 AngularJS 1.x, Module2 AngularJS 2.
  • Migration step by step with ngUpgrade: Mixed application, no big bang migration.
    • 2 steps:
      • Preparation of AngularJS 1 code to make it possible to mix with AngularJS 2.
      • Migration of code to AngularJS 2.

Tip: Write the best possible most modern AngularJS 1 code for easier migration to AngularJS 2.

Concepts in ng1 and ng2


AngularJS 2 is a component of components of components…

Component ng2 = Component Controller + Template.

Preparation for migration

AngularJS 1.5 Components

ng1

  • $scope was used for everything but should be avoided, instead use controller that are instantiated like classes. We want only one object in scope, this is the controller.
  • Use controllerAs to instantiate controller with new, results in a new object with the name in the scope.
  • Reconsider bindings, isolated scopes communicate with the world outside. Use bindToController = true in app.directive() to bind it to controller object and not to scope. Big step towards components.
  • component – syntax sugar for app.directive. Best practice to migration to ng2.
  • Communication with parent components: with require Angular goes up in the DOM. If found, saved into property parent in the controller. Controller gets everything in as properties.
  • One-Way-Bindings: only one-way-binding in ng2. Can be done in AngularJS 1.5 with ‘<’ in bindings.
  • Restrictions:
    • always one isolated scope with components in ng1.
    • always controllerAs semantic.
    • No compile, no link and no replace.
  • Life-cycle-hooks: methods inside of components that are called at specific time.
    • $onInit, $onChanges (only for one way bindings, doesn’t work with classic two way binding), $onDestroy, $postLink.
  • Routing: use dummy inline template in ng1. Rote to Components coming soon, currently version 1.x Alpha.

Preparations recap for migration to AngularJS 2 but also for further development with AngularJS 1.x:

  • controllerAs
  • bindToController
  • Components in Angular 1.5

Plus: familiarize yourself with TypeScript. You need it with ng2.

ES6 and TypeScript


There is no reason to do anything with ES5 now. Use ES6. It can also be compiled down to ES5. TypeScript is like ES6 plus additional support.

Migration

ngUpgrade

Use ngUpgrade to combine parts from ng1 and parts from ng2. Mix and match.


Elements can be up and downgraded. Downgrade means it gets a wrapper to look like ng1. Also with upgrade there is a small wrapper to look like ng2.

Pre-requisites:

  • AngularJS 1.x
  • Angular 2 (+upgrade.js)

Cons: loading of two frameworks in browser. Caching mechanisms can help here.

Bootstrapping: use upgrade adapter to up and downgrade. Only one adapter!

UpgradeAdapter:

  • upgradeNg1Component, upgradeNg1Provider, downgradeNg2Component, downgradeNg2Provider.
  • addProvider to register services to use ng2, configures dependency injection mechanism of ng2.

Exercise: http://tinyurl.com/dwx-angular1-to-2-2016

Advertisements