migrating from angularjs when you can't use the word "big bang@
TRANSCRIPT
![Page 1: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/1.jpg)
How to migrate from AngularJS
![Page 2: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/2.jpg)
![Page 3: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/3.jpg)
When you can’t use the word “Big Bang”
![Page 4: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/4.jpg)
?
![Page 5: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/5.jpg)
How is this structured?
![Page 6: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/6.jpg)
• Mental Model• Plan• Case Study
How is this structured?
![Page 7: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/7.jpg)
https://github.com/codecraftpro/angularjs-migration-workshop
How is this structured?
![Page 8: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/8.jpg)
Who am I?
![Page 9: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/9.jpg)
![Page 11: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/11.jpg)
Angular:From Theory to Practice
angular.codecraft.tv
Kickstarter Funded - FREE
angular.codecraft.tv — @jawache
![Page 22: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/22.jpg)
DEMO
![Page 26: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/26.jpg)
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
angular.codecraft.tv — @jawache
![Page 27: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/27.jpg)
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
4+angular.codecraft.tv — @jawache
![Page 28: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/28.jpg)
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
4+angular.codecraft.tv — @jawache
![Page 31: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/31.jpg)
List
List
AngularJS
DowngradedAngular
Angular
UpgradedAngularJS List ⬆
List ⬇
![Page 34: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/34.jpg)
<card>
<body>
<spinner>
![Page 35: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/35.jpg)
<card>
<body>
<spinner>
![Page 36: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/36.jpg)
<card> ⬇
<body>
<spinner>
![Page 37: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/37.jpg)
<body>
<spinner> ⬆
<card> ⬇
![Page 40: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/40.jpg)
Service
ListCard
Spinner
Edit
Create
Search
JS
4+
Resource ⬇
![Page 41: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/41.jpg)
Service ⬇
ListCard
Spinner
Edit
Create
Search
JS
4+
Resource
![Page 42: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/42.jpg)
Service ⬇
ListCard ⬇
Spinner
Edit
Create
Search
JS
4+
Resource
![Page 43: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/43.jpg)
Service ⬇
ListCard ⬇
Spinner ⬇
Edit
Create
Search
JS
4+
Resource
![Page 44: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/44.jpg)
Service ⬇
List ⬇Card
Spinner
Edit
Create
Search
JS
4+
Resource
![Page 45: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/45.jpg)
Service
List ⬇Card
Spinner
Edit ⬇
Create ⬇
Search ⬇
JS
4+
Resource
![Page 46: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/46.jpg)
Service
ListCard
Spinner
Edit
Create
Search
4+Resource
![Page 47: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/47.jpg)
But…
![Page 48: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/48.jpg)
• Filters• (some) Directives
![Page 50: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/50.jpg)
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
angular.codecraft.tv — @jawache
![Page 51: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/51.jpg)
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
angular.codecraft.tv — @jawache
![Page 52: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/52.jpg)
Top Tips!
![Page 54: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/54.jpg)
CODE!
![Page 55: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/55.jpg)
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
angular.codecraft.tv — @jawache
![Page 56: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/56.jpg)
Top Tips!
![Page 62: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/62.jpg)
CODE!
![Page 63: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/63.jpg)
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
angular.codecraft.tv — @jawache
![Page 64: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/64.jpg)
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
angular.codecraft.tv — @jawache
![Page 65: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/65.jpg)
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
4+angular.codecraft.tv — @jawache
![Page 66: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/66.jpg)
Top Tips!
![Page 68: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/68.jpg)
CODE!
![Page 69: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/69.jpg)
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
angular.codecraft.tv — @jawache
![Page 70: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/70.jpg)
Service ⬇
ListCard
Spinner
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
![Page 71: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/71.jpg)
Top Tips!
![Page 73: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/73.jpg)
CODE!
![Page 74: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/74.jpg)
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
angular.codecraft.tv — @jawache
![Page 75: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/75.jpg)
Service ⬇
ListCard ⬇
Spinner ⬇
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
![Page 76: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/76.jpg)
Service ⬇
List ⬇Card
Spinner
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
![Page 77: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/77.jpg)
Service ⬇
List ⬇Card
Spinner
Edit ⬇
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
![Page 78: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/78.jpg)
CODE!
![Page 79: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/79.jpg)
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
angular.codecraft.tv — @jawache
![Page 80: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/80.jpg)
Tiny Pop
![Page 81: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/81.jpg)
• Bootstrap with Angular• Angular Router
angular.codecraft.tv — @jawache
![Page 82: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/82.jpg)
CODE!
![Page 83: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/83.jpg)
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
angular.codecraft.tv — @jawache
![Page 84: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/84.jpg)
Service
ListCard
Spinner
Edit
Create
Search
4+Resource
angular.codecraft.tv — @jawache
![Page 85: Migrating from AngularJS when you can't use the word "Big Bang@](https://reader035.vdocument.in/reader035/viewer/2022070519/58ed13f91a28ab75758b463d/html5/thumbnails/85.jpg)
Finished