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

asim@codecraft.tv

Angular:From Theory to Practice

angular.codecraft.tv

Kickstarter Funded - FREE

angular.codecraft.tv — @jawache

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

ui-router

Mental Model

Dual Booting

Service

ListCard

Spinner

ResourceEdit

Create

Search

Service

ListCard

Spinner

ResourceEdit

Create

Search

4+angular.codecraft.tv — @jawache

Service

ListCard

Spinner

ResourceEdit

Create

Search

Zones ➡ $scope.$apply(…)

Chameleon

AngularJS

DowngradedAngular

Angular

UpgradedAngularJS List ⬆

List ⬇

Service ⬇

Service

Control Freak

<card>

<body>

<card>

<body>

<card> ⬇

<body>

<body>

<spinner> ⬆

<card> ⬇

Root Component is AngularJS

Plague

Service

ListCard

Spinner

Create

Search

Resource ⬇

Service ⬇

ListCard

Spinner

Create

Search

Resource

Service ⬇

ListCard ⬇

Spinner

Create

Search

Resource

Service ⬇

ListCard ⬇

Spinner ⬇

Create

Search

Resource

Service ⬇

List ⬇Card

Spinner

Create

Search

Resource

Service

List ⬇Card

Spinner

Edit ⬇

Create ⬇

Search ⬇

Resource

Service

ListCard

Spinner

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

Top Tips!

Start with the Service/Factories

$resource use $http

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

$q use Promise

angular.forEach use for…of

Service

ListCard

Spinner

ResourceEdit

Create

Search

Service

ListCard

Spinner

ResourceEdit

Create

Search

Top Tips!

Remove ng-app

Service ⬇

ListCard

Spinner

Create

Search

Resource

Top Tips!

• Re-write• Find• Upgrade

Service ⬇

ListCard ⬇

Spinner ⬇

Create

Search

Resource

Service ⬇

List ⬇Card

Spinner

Create

Search

Resource

Service ⬇

List ⬇Card

Spinner

Edit ⬇

Create

Search

Resource

Tiny Pop

• Bootstrap with Angular• Angular Router

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

Create

Search

4+Resource

Finished

Questions?

asim@codecraft.tv@jawache

github.com/jawache/ama

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

Technology

Migrating Legacy Web Applications to AngularJS

AngularJS Testing

AngularJS - Services

AngularJS Overview

Www.luxoft.com AngularJS Forms & validation. AngularJS form example First

AngularJS Tutorial - AngularJS an einem Tag lernen

[IT기술칼럼 #4] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원

AngularJS 101

AngularJS Basics

Practical AngularJS

AngularJS Interview Questions · AngularJS Interview Questions codespaghetti.com/angularjs-interview-questions/ Angular JS Angular JS Interview Questions, Best AngularJS Programs

AngularJS & Plone

AngularJS Sharing

Testing AngularJS

AngularJS UTOSC

AngularJS intro

Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development

AngularJS Internal

Dutch angularjs

Angularjs architecture