View
443
Download
6
Category
Preview:
Citation preview
How to migrate from Angular 1
When you can’t use the word “Big Bang”
• Mental Model• Plan• Case Study
• AngularJS• ES6 & TypeScript• Angular
Terminology
Angular = Angular 2+
AngularJS = Angular 1.x
Filters = Pipes
Controllers = Components
Directives + HTML = Components
Directives - HTML = Directives
Service/Factory = Service
Entity?
Migration or Upgrade?
DEMO
Mental Model
Multiple Personality Disorder
Service
ListCard
Spinner
ResourceEdit
Create
Search
1.x
Service
ListCard
Spinner
ResourceEdit
Create
Search
1.x
2+
Service
ListCard
Spinner
ResourceEdit
Create
Search
1.x
2+
Root is AngularJS
Zone ➡ $scope.$apply(…)
Cross Dresser
List
List
AngularJS
DowngradedAngular
Angular
UpgradedAngularJS List ⬆
List ⬇
Service ⬇
List
Edit
Service
Control Freak
<card>
<body>
<spinner>
<card>
<body>
<spinner>
<card> ⬇
<body>
<spinner>
<body>
<spinner> ⬆
<card> ⬇
Disease
Service
ListCard
Spinner
Edit
Create
Search
1.x
2+
Resource ⬇
Service ⬇
ListCard
Spinner
Edit
Create
Search
1.x
2+
Resource
Service ⬇
ListCard ⬇
Spinner
Edit
Create
Search
1.x
2+
Resource
Service ⬇
ListCard ⬇
Spinner ⬇
Edit
Create
Search
1.x
2+
Resource
Service ⬇
List ⬇Card
Spinner
Edit
Create
Search
1.x
2+
Resource
Service
List ⬇Card
Spinner
Edit ⬇
Create ⬇
Search ⬇
1.x
2+
Resource
Service
ListCard
Spinner
Edit
Create
Search
2+Resource
But…
• Filters• (some) Directives
Asim’s 10 Step Plan
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular 8. Components to Angular9. Routing to Angular10.Remove AngularJS
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
Top Tips!
Start with the Router
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
Top Tips!
Start with the Service/Factories
$resource use $http
$q use Promise
.factory(..) use .service(..)
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
Service
ListCard
Spinner
ResourceEdit
Create
Search
1.x
Service
ListCard
Spinner
ResourceEdit
Create
Search
1.x
2+
Top Tips!
Remove ng-app
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular 8. Components to Angular9. Routing to Angular10.Remove AngularJS
Service ⬇
ListCard
Spinner
Edit
Create
Search
1.x
2+
Resource
Top Tips!
• Re-write• Find• Upgrade
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular 8. Components to Angular9. Routing to Angular10.Remove AngularJS
Service ⬇
ListCard ⬇
Spinner ⬇
Edit
Create
Search
1.x
2+
Resource
Service
List ⬇Card
Spinner
Edit
Create
Search
1.x
2+
Resource
Service
List ⬇Card
Spinner
Edit ⬇
Create
Search
1.x
2+
Resource
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
Tiny Pop
Angular RouterAdd Root Component
Top Tips!
• Multiple named ui-views• Multiple names router-outlets
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
Service
ListCard
Spinner
Edit
Create
Search
2+Resource
Finished
Questions?
codecraft.tv@jawache
Recommended