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
830
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
98
GET TO THE CHOPVAR
mattdsteele
0
150
Using Source Maps in 2015
mattdsteele
0
790
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.2k
The Decorator Pattern
mattdsteele
0
52
Diving Into the Device API
mattdsteele
1
560
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
620
What Zelda Taught Me about Front End Engineering
mattdsteele
5
920
Other Decks in Programming
See All in Programming
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
180
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
楽しく向き合う例外対応
okutsu
0
580
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
バッチを作らなきゃとなったときに考えること
irof
2
520
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
280
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
150
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
980
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
110
Rubyと自由とAIと
yotii23
6
1.6k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
Ruby on cygwin 2025-02
fd0
0
180
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Become a Pro
speakerdeck
PRO
26
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Six Lessons from altMBA
skipperchong
27
3.6k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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