- 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.
- 2 steps:
Tip: Write the best possible most modern AngularJS 1 code for easier migration to AngularJS 2.
Concepts in ng1 and ng2
Component ng2 = Component Controller + Template.
Preparation for migration
AngularJS 1.5 Components
- $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.
- 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:
- Components in Angular 1.5
Plus: familiarize yourself with TypeScript. You need it with ng2.
ES6 and TypeScript
Use ngUpgrade to combine parts from ng1 and parts from ng2. Mix and match.
- 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!
- upgradeNg1Component, upgradeNg1Provider, downgradeNg2Component, downgradeNg2Provider.
- addProvider to register services to use ng2, configures dependency injection mechanism of ng2.