Angular 2.0 - Sddconf

1y ago
7 Views
2 Downloads
854.56 KB
23 Pages
Last View : 20d ago
Last Download : 2m ago
Upload by : Sasha Niles
Transcription

Angular 2.0: Migration paths from 1.x to 2.0 Manfred Steyer About me Manfred Steyer Trainer & Consultant Angular & .NET Page 2 1

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 2

Ostrich-Strategy Page 6 [https://creativecommons.org/licenses/by/2.0/] [(c) weisserstier, 110613 Straussenland 089, http://tinyurl.com/jza7wcy] Microservice Approach Module 1 AngularJS 1.x Module 2 Angular 2 Module 3 Angular 3 Page 7 3

(Stepwise) Migration 1 App 1 FlightList 1 1 FlightCard FlightSvc Page 8 (Stepwise) Migration 1 App 1 FlightList 2 2 FlightCard FlightSvc Page 9 4

(Stepwise) Migration 1 App 1 2 FlightList 2 2 1 FlightCard 1 FlightSvc PassengerList PassengerCard PassengerSvc Page 10 (Stepwise) Migration 2 App 2 FlightList 2 2 FlightCard FlightSvc 2 2 2 PassengerList PassengerCard PassengerSvc Page 11 5

Two Steps Preparation Migration Page 12 PREPARATION Page 13 6

Components in Angular 2 Component Controller Template Page 16 Controller Controller Template x z y Scope Page 19 7

Controller Controller Template vm Scope Page 20 Controller-as div ng-controller "Controller as myCtrl" [ ] /div Controller Template new myCtrl Scope Page 21 8

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

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

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

Components in ng1.5 restrict: 'E' scope: {} bindToController controllerAs (Default ctrl) No compile No link No replace Page 28 Recap controllerAs bindToController Components in Angular 1.5 Page 29 12

COMPONENT ROUTER IN ANGULAR 1.X Page 30 Why 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 easier Page 31 13

Components and UI-Router stateProvider.state('passenger-list', { url: '/passenger-list', template: ' passenger-list /passenger-list ' }); Page 32 Component Router in Angular 1.x app.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 33 14

TYPESCRIPT AND ES 6 Page 36 ES 5 ES 6 TypeScript ES 5 ES 6 TypeScript Page 37 15

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

Using EcmaScript 6 today Compile to ES5 („Transpilation“) Popular Transpiler: Babel Page 40 Using TypeScript today TypeScript-Compiler compiles TypeScript down to ES6, ES5 oder ES3 Page 41 17

NG-FORWARD Page 42 NG-Forward Page 43 18

Recap controller-as, bindToController, .component ES6/ TypeScript Decorators and ngForward Component Router in AngularJS 1.x Page 44 Recap controller-as, bindToController, .component ES6/ TypeScript Decorators and ngForward Component Router in AngularJS 1.x Page 45 19

NGUPGRADE Page 46 ngUpgrade 1 App 1 FlightList 2 2 FlightCard FlightSvc 2 1 1 PassengerList PassengerCard PassengerSvc Page 47 20

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

UpgradeAdapter upgradeNg1 Component upgradeNg1 Provider downgradeNg2 Provider downgradeNg2 Component addProvider (DI for ng2) Page 51 DEMO Page 52 22

ngUpgrade 1 App 1 FlightList 2 2 FlightCard FlightSvc 2 1 1 PassengerList PassengerCard PassengerSvc Page 54 Contact manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer 23

Angular 2.0: Migration paths from 1.x to 2.0 Manfred Steyer . Angular 2 Module 3 Angular 3. 4 (Stepwise) Migration Page 8 FlightCard FlightSvc FlightList 1 App 1 1 1 (Stepwise) Migration Page 9 FlightCard FlightSvc FlightList 1 App 1 2 2. 5 (Stepwise) Migration Page 10 FlightCard

Related Documents:

it could be considered a new framework. Angular versions 2 and up are backward compatible till the Angular 2, but not with Angular 1. To avoid confusion, Angular 1 is now named Angu-lar JS and Angular versions 2 and higher are named Angular. Angular JS is based on JavaScript while Angular is based on JavaScript superset called TypeScript.

Angular Kinetics similar comparison between linear and angular kinematics Mass Moment of inertia Force Torque Momentum Angular momentum Newton’s Laws Newton’s Laws (angular analogs) Linear Angular resistance to angular motion (like linear motion) dependent on mass however, the more closely mass is distributed to the

Both Angular 2 and 4 are open-source, TypeScript-based front-end web application platforms. is the latest version of Angular. Although Angular 2 was a complete rewrite of AngularJS, there are no major differences between Angular 2 and Angular 4. Angular 4 is only an improvement and is backward compatible with Angular 2.

0. Since the angular measure q is the angular analog of the linear distance measure, it is natural to define the average angular velocity Xw\ as Xw\ q f-q 0 Dt where q 0 is the initial angular position of the object when Dt 0 and q f is the final angular position of the object after a time Dt of angular motion.

Chapter 1: Getting started with Angular Remarks Angular (commonly referred to as "Angular 2 " or "Angular 2") is a TypeScript-based open-source front-end web framework led by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer's workflow while building complex web applications.

Angular JS Angular Course Curriculum Our Angular course content covers all Client-side technologies which is prepared by our Angular experts to make it suitable for everyone and ensure that it covers all the industry related skills and techniques to start a successful career growth. Our Experts always updating the Angular

Angular CLI is one of the most powerful accessibility tools available when developing apps with Angular. Angular CLI makes it easy to create an application and follows all the best practices! Angular CLI is a command-line interface tool that is used to initialize, develop, scaffold, maintain and even test and debug Angular applications.

English language and the varieties of dialects/ differences within. The final segment of this course will explore the description and transcription of disordered speech. Required Textbook (Rental): Small, L. H. (2015). Fundamentals of phonetics: A practical guide for students, Fourth edition. Pearson. Audio CDs that accompany the textbook.