Migrating from AngularJS when you can't use the word "Big Bang@

How to migrate from AngularJS

When you can’t use the word “Big Bang”

?

How is this structured?

• Mental Model• Plan• Case Study


https://github.com/codecraftpro/angularjs-migration-workshop




Who am I?

Asim Hussain@jawache

[email protected]

mailto:[email protected]?subject=

Angular:From Theory to Practice

angular.codecraft.tv

Kickstarter Funded - FREE

angular.codecraft.tv — @jawache

http://angular.codecraft.tv/


Terminology



Angular = Angular 4+



AngularJS = Angular 1.x



Filters = Pipes



Controllers = Components



Directives + HTML = Components



Directives - HTML = Directives



Service/Factory = Service



Entity?



Angular is BLUEAngularJS is RED



DEMO

ui-router



Mental Model



Dual Booting



Service

ListCard

Spinner

ResourceEdit

Create

Search

JS



Service

ListCard

Spinner

ResourceEdit

Create

Search

JS

4+angular.codecraft.tv — @jawache


Service

ListCard

Spinner

ResourceEdit

Create

Search

JS



Zones ➡ $scope.$apply(…)



Chameleon



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> ⬇

Root Component is AngularJS



Plague



Service

ListCard

Spinner

Edit

Create

Search

JS

4+

Resource ⬇

Service ⬇

ListCard

Spinner

Edit

Create

Search

JS

4+

Resource

Service ⬇

ListCard ⬇

Spinner

Edit

Create

Search

JS

4+

Resource

Service ⬇

ListCard ⬇

Spinner ⬇

Edit

Create

Search

JS

4+

Resource

Service ⬇

List ⬇Card

Spinner

Edit

Create

Search

JS

4+

Resource

Service

List ⬇Card

Spinner

Edit ⬇

Create ⬇

Search ⬇

JS

4+

Resource

Service

ListCard

Spinner

Edit

Create

Search

4+Resource

But…

• Filters• (some) Directives

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!




Top Tips!

Start with the Service/Factories



$resource use $http



.factory(..) use .service(..)



$q use Promise



angular.forEach use for…of



CODE!




Service

ListCard

Spinner

ResourceEdit

Create

Search

JS



Service

ListCard

Spinner

ResourceEdit

Create

Search

JS



Top Tips!

Remove ng-app



CODE!




Service ⬇

ListCard

Spinner

Edit

Create

Search

JS

4+

Resource



Top Tips!

• Re-write• Find• Upgrade



CODE!




Service ⬇

ListCard ⬇

Spinner ⬇

Edit

Create

Search

JS

4+

Resource



Service ⬇

List ⬇Card

Spinner

Edit

Create

Search

JS

4+

Resource



Service ⬇

List ⬇Card

Spinner

Edit ⬇

Create

Search

JS

4+

Resource



CODE!




Tiny Pop

• Bootstrap with Angular• Angular 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



Service

ListCard

Spinner

Edit

Create

Search

4+Resource



Finished

Questions?

[email protected]@jawache

github.com/jawache/ama

http://github.com/jawache/ama

Technology

Migrating from AngularJS when you can't use the word "Big Bang@