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
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
構文解析器入門
ydah
7
1.9k
階層化自動テストで開発に機動力を
ickx
1
440
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
300
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
iOS開発スターターキットの作り方
akidon0000
0
210
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
200
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
How to Ace a Technical Interview
jacobian
278
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Speed Design
sergeychernyshev
32
1k
Designing for humans not robots
tammielis
253
25k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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