Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Upgrading to Angular 2 using ngUpgrade
Search
Matt Steele
April 26, 2016
Programming
0
970
Upgrading to Angular 2 using ngUpgrade
Matt Steele
April 26, 2016
Tweet
Share
More Decks by Matt Steele
See All by Matt Steele
Reactive Programming with RxJS
mattdsteele
0
110
GET TO THE CHOPVAR
mattdsteele
0
160
Using Source Maps in 2015
mattdsteele
0
890
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.3k
The Decorator Pattern
mattdsteele
0
64
Diving Into the Device API
mattdsteele
1
670
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
700
What Zelda Taught Me about Front End Engineering
mattdsteele
5
1k
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
500
Cursorハンズオン実践!
eltociear
2
1.2k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
CSC305 Lecture 10
javiergs
PRO
0
260
Devoxx BE - Local Development in the AI Era
kdubois
0
140
チームの境界をブチ抜いていけ
tokai235
0
230
CSC305 Lecture 11
javiergs
PRO
0
270
CSC305 Lecture 08
javiergs
PRO
0
280
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Code Reviewing Like a Champion
maltzj
526
40k
How STYLIGHT went responsive
nonsquared
100
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Rails Girls Zürich Keynote
gr2m
95
14k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Unsuck your backbone
ammeep
671
58k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Automating Front-end Workflow
addyosmani
1371
200k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Transcript
Upgrading to Angular 2 @mattdsteele https://steele.blue
Everything is terrible
Everything is terrible Your App
Upgrade Options
Upgrade Options
Upgrade Options Big Bang Rewrite
Upgrade Options Big Bang Rewrite ngForward
Upgrade Options Big Bang Rewrite ngForward ngUpgrade
Upgrade Options Big Bang Rewrite ngForward ngUpgrade
ngYourAppIsSaved
Angular 2 Module
Angular 2 Module import { UpgradeAdapter } from 'angular2/upgrade';
Run In Parallel
Component Interoperability
Component Interoperability In Both Directions*
What can be upgraded?
Components & Services
Angular 1 Components
Angular 1 Components Must Be:
Angular 1 Components restrict: 'E' Must Be:
Angular 1 Components restrict: 'E' scope: {}, Must Be:
Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, Must
Be:
Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, controllerAs,
Must Be:
Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, controllerAs,
template Must Be:
Angular 1 Components Can Be:
Angular 1 Components Can Be: transclude: true,
Angular 1 Components Can Be: transclude: true, require
Angular 1 Components Must Not Be: compile replace: true priority
terminal
.component()
Angular 1 Services
Angular 1 Services Pretty Straightforward
Angular 2 Components
Angular 2 Services
Transclusion/Content Projection
Transclusion/Content Projection
Transclusion/Content Projection
Component Tree
Component Tree
angular.io/docs/ts/latest/guide/upgrade.html
Upgrade Strategy
Stuff You Can Do Now
Stuff You Can Do Now • Code in TypeScript/ES6
Stuff You Can Do Now • Code in TypeScript/ES6 •
Use a module loader
Stuff You Can Do Now • Code in TypeScript/ES6 •
Use a module loader • Convert factories/services/providers to Services (ES6 Classes)
Stuff You Can Do Now • Code in TypeScript/ES6 •
Use a module loader • Convert factories/services/providers to Services (ES6 Classes) • Convert Directives to Components
Upgrade Time
Upgrade Time • Launch as hybrid app (UpgradeAdapter)
Upgrade Time • Launch as hybrid app (UpgradeAdapter) • Migrate
components
In The Future
In The Future Drop ng1
In The Future Drop ng1 Bask in glory
Let's Upgrade Something
Super Bowl Squares http://www.zpoolz.com/main/Poolz_Football/2015/2016sbs5.jpg
Services Datasets Data
square-cell Components superbowl-header superbowl-squares square-cell square-cell
square-cell Components + Services superbowl-header superbowl-squares square-cell square-cell Datasets Data
square-cell Angular 1 Components superbowl-header superbowl-squares square-cell square-cell Datasets Data
square-cell 1. Boot with UpgradeAdapter superbowl-header superbowl-squares square-cell square-cell Datasets
Data UpgradeAdapter
square-cell 2. Services superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter
square-cell 3. Add Top Level App superbowl-header superbowl-squares square-cell square-cell
Datasets Data UpgradeAdapter superbowl-app
square-cell 4. Header Component superbowl-header superbowl-squares square-cell square-cell Datasets Data
UpgradeAdapter superbowl-app
square-cell 5. App superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter
superbowl-app
square-cell 6. Cells superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter
superbowl-app
square-cell 7. Squares superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter
superbowl-app
square-cell 8. Bootstrap with ng2 superbowl-header superbowl-squares square-cell square-cell Datasets
Data superbowl-app
Gotchas
Testing
Testing • Testing w/o Angular? Easy
Testing • Testing w/o Angular? Easy • Good recipes for
ng2 tests https://medium.com/google-developer-experts/angular-2-unit- testing-with-jasmine-defe20421584#.pevppwgy2 https://speakerdeck.com/cironunes/unit-testing-in-angular-2
End To End Tests
Testing Hybrid Components superbowl-squares Datasets Data http://stackoverflow.com/questions/36827715/testing-an-angular-app-with- ngupgrade-fails-with-unknown-provider-ng2-injector
Testing Hybrid Components https://github.com/mattdsteele/football-squares/commit/ 77c1d42d4ef5e1546f1de46efa56db4caff232f7 superbowl-header superbowl-squares Datasets Data superbowl-app
Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns
track by $index"> <square-cell score-data="$ctrl.data" stats="$ctrl.stats" home="$ctrl.rows[row]" away="$ctrl.columns[column]" always-visible="$ctrl.allNumbers"> </square-cell> </td>
Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns
track by $index"> <square-cell [score-data]="$ctrl.data" [stats]="$ctrl.stats" [home]="$ctrl.rows[row]" [away]="$ctrl.columns[column]" [always-visible]="$ctrl.allNumbers"> </square-cell> </td>
Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns
track by $index"> <square-cell [scoreData]="data" [stats]="stats" [home]="rows[row]" [away]="columns[column]" [alwaysVisible]="allNumbers"> </square-cell> </td>
Bookmark These Sites • http://angularjs.blogspot.com/2015/08/angular-1-and-angular-2-coexistence.html • https://angular.io/docs/ts/latest/guide/upgrade.html • http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html •
http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
/mattdsteele/football-squares @mattdsteele https://steele.blue
Routing • Component Router • UI Router • http://slides.com/christhielen/ui-router-ng1-to-ng2 •
https://youtu.be/mnkG-RRkZtU