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
940
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
660
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
690
What Zelda Taught Me about Front End Engineering
mattdsteele
5
1k
Other Decks in Programming
See All in Programming
開発生産性を上げるための生成AI活用術
starfish719
1
180
CSC509 Lecture 05
javiergs
PRO
0
300
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
100
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
プログラマのための作曲入門
cheebow
0
540
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.4k
dynamic!
moro
9
6.7k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
160
CSC509 Lecture 03
javiergs
PRO
0
330
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Faster Mobile Websites
deanohume
310
31k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Visualization
eitanlees
148
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Optimizing for Happiness
mojombo
379
70k
The Invisible Side of Design
smashingmag
301
51k
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