Angular 2.0 - Sddconf

Transcription

Angular 2.0:Migration paths from 1.x to 2.0Manfred SteyerAbout me Manfred Steyer Trainer & Consultant Angular & .NETPage 21

Contents General Approaches Preparation Components in ng1.5 Component Router in AngularJS 1.x ES6 and TypeScript Overview of Decorators and ng-forward Migration ngUpgradePage 3GENERAL APPROACHESPage 52

Ostrich-StrategyPage ) weisserstier, 110613 Straussenland 089, http://tinyurl.com/jza7wcy]Microservice ApproachModule 1AngularJS 1.xModule 2Angular 2Module 3Angular 3Page 73

(Stepwise) Migration1App1FlightList11FlightCardFlightSvcPage 8(Stepwise) Migration1App1FlightList22FlightCardFlightSvcPage 94

(Stepwise) ssengerListPassengerCardPassengerSvcPage 10(Stepwise) ssengerListPassengerCardPassengerSvcPage 115

Two StepsPreparationMigrationPage 12PREPARATIONPage 136

Components in Angular 2ComponentControllerTemplatePage 16ControllerControllerTemplatexzyScopePage 197

ControllerControllerTemplatevmScopePage 20Controller-as div ng-controller "Controller as myCtrl" [ ] /div ControllerTemplatenewmyCtrlScopePage 218

Controller-as div ng-controller "Controller as myCtrl" input ng-model "myCtrl.from" input ng-model "myCtrl.to" [ ] /div ControllerTemplatenewcontrollerScopePage 22Constructor-Function for Controllerfunction FlightListController( http, log) {this.from "Graz";this.to "Hamburg";this.selectedFlight null;this.flights [];this.message "";this.search function() { }this.select function() { }}Page 239

Controller-as and UI-Router stateProvider.state('home', {url: '/home',templateUrl: '/app/home/home.html',controller: 'home',controllerAs: 'home'})Page 24ControllerAs and Directivesapp.directive('passengerCard', function() {return { a ng-click "myCtrl.select()" restrict: 'E', templateUrl: ' ', /a controller: function() {this.select function() {this.selectedItem this.item;}}, passenger-cardcontrollerAs: 'myCtrl',item "myPassenger"scope: {selectedItem "selected" item: ' ', /passagier-card selectedItem: ' '},bindToController: true}});Page 2510

ControllerAs and Directivesapp.directive('passengerCard', function() {return { a ng-click "myCtrl.select()" restrict: 'E', templateUrl: ' ', /a controller: function() {this.select function() {this.selectedItem this.item;}}, passenger-cardcontrollerAs: 'myCtrl',item "myPassenger"bindToController: {selectedItem "selected" item: ' ', /passagier-card selectedItem: ' '}}});Page 26Components in Angular 1.5app.component('passengerCard', {templateUrl: '[ ]',controller: function() {this.select () {this.selectedItem this.item;}},controllerAs: 'myCtrl', // -- Default: ctrlbindings: {item: ' ',selectedItem: ' '}});Page 2711

Components in ng1.5restrict: 'E'scope: {}bindToControllercontrollerAs(Default ctrl)No compileNo linkNo replacePage 28Recap controllerAs bindToController Components in Angular 1.5Page 2912

COMPONENT ROUTERIN ANGULAR 1.XPage 30Why Component Router in Angular 1.5 Routing-Solution for Angular 2 Back-ported to Angular 1.x Directly activates Components Makes Migration to Angular 2 easierPage 3113

Components and UI-Router stateProvider.state('passenger-list', {url: '/passenger-list',template: ' passenger-list /passenger-list '});Page 32Component Router in Angular 1.xapp.component('app', {controller: AppController,controllerAs: 'app',templateUrl: "app.html", routeConfig: [{ path: '/', component: 'home',name: 'Home', useAsDefault: true },{ path: '/bookFlight', component: 'bookFlight',name: 'BookFlight' }]});app.value(' routerRootComponent', 'app');Page 3314

TYPESCRIPT AND ES 6Page 36ES 5 ES 6 TypeScriptES 5ES 6TypeScriptPage 3715

Controller in ES 6export class FlightSearchController {constructor() {this.from "Vienna";this.to "London";}search() { [ ] }select(flight) { [ ] }}Page 38Controller in TypeScriptexport class FlightSearchController {public from: string;public to: string;constructor() {this.from "Vienna";this.to "London";}public search() { [ ] }public select() { [ ] }}Page 3916

Using EcmaScript 6 today Compile to ES5 („Transpilation“) Popular Transpiler: BabelPage 40Using TypeScript today TypeScript-Compiler compiles TypeScriptdown to ES6, ES5 oder ES3Page 4117

NG-FORWARDPage 42NG-ForwardPage 4318

Recap controller-as, bindToController, .component ES6/ TypeScript Decorators and ngForward Component Router in AngularJS 1.xPage 44Recap controller-as, bindToController, .component ES6/ TypeScript Decorators and ngForward Component Router in AngularJS 1.xPage 4519

NGUPGRADEPage PassengerListPassengerCardPassengerSvcPage 4720

What do we need? AngularJS 1.x Angular 2 ( upgrade.js)Page 48Bootstrappingimport {upgradeAdapter} from './upgrade-adapter';// Upgrade von ng1.x-Services und -Komponenten// Downgrade von ng2-Services und , ['app']);Instead of ng-app bzw. angular.bootstrapPage 5021

der(DI for ng2)Page 51DEMOPage 5222

ssengerListPassengerCardPassengerSvcPage REarchitekt.atManfredSteyer23

Angular 2.0: Migration paths from 1.x to 2.0 Manfred Steyer About me Manfred Steyer Trainer & Consultant Angular & .NET Page 2. 2 Contents General Approaches Preparation Components in ng1.5 Component Router in AngularJS 1.x ES6 and TypeScript Overview of Decorators and ng-forward Migration ngUpgrade Page 3 GENERAL APPROACHES Page 5. 3 Ostrich-Strategy Page 6