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
900
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
870
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.3k
The Decorator Pattern
mattdsteele
0
62
Diving Into the Device API
mattdsteele
1
630
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
660
What Zelda Taught Me about Front End Engineering
mattdsteele
5
1k
Other Decks in Programming
See All in Programming
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
340
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
260
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
550
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
740
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
770
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
DataformでPythonする / dataform-de-python
snhryt
0
140
階層化自動テストで開発に機動力を
ickx
1
460
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
RailsConf 2023
tenderlove
30
1.2k
What's in a price? How to price your products and services
michaelherold
246
12k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Faster Mobile Websites
deanohume
308
31k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How STYLIGHT went responsive
nonsquared
100
5.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
KATA
mclloyd
31
14k
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