SlideShare a Scribd company logo
From 1.x to 2.0
Ran Wahle
Agenda
 A little about Angular 2.0
 A little chat application with Angular 1.x
 Reorganizing modules
 Using Module loader
 Switching to typescript
 Using angular 1.5 components
 Using webpack as our module loader
 Make hybrid application with ng-2
 Gradually swithing to ng-2
A little about myself
 Full-stack developer
 Enthusiastic front-end developer
 Poor UI designer
 Participated in writing Developing an Angular 2 Edge
A little about Angular 2.0
 A whole new rewrite
 No $scope (and no $scope.$apply/$applyAsync)
 A whole new change detection system
 No modules (not in the Angular 1.x way)
 Supports new standards
A little about rc-5
 NgModule decorator
 AoT Compilation
What is our goal?
 Gradually migrate Angular 1.x application
 During the process, enjoy Angular 2.0 capabilities
in our Angular 1.x application
What do we need?
 Prepare our application
 Blend Angular 2.0 in
 Gradually upgrade
A little chat application from 2012
 One module
 Every service, controller, directive, component and filter will be registered to it.
 This one module is bootstraped to the document
 Uses socket.io for chating
 Needs to be migrated gradually (well, it did if it was big)
What have we done already
 Used controllerAs syntax
 No function or field is declared directly on the scope
Restructuring modules
 Every controller / directive / service will now have its own module
 Every module will have its own dependencies
 The main module depend on other modules
Load modules with AMD
 Remove all script tags from the application’s HTML page
 Declare JS dependencies directly in JS files
Switch to TypeScript
 Why?
 Actually we can rename our ‘js’ files to ‘ts’
and correct compiler errors in case there are
 All our controllers / components/ services can be switched to classes
 We may reduce the prototype
Using Angular 1.5 component
 Why? This is the closest we can get to Angular 2.0 component
 Controller that is bound to an HTML page can be easily replaced with a
component and template
 Template directive, can be replaced even easier
Using WebPack
 It is not necessary for the migration, but usefull nevertheless
 Our TS code can use “import“ statements
 On our tsConfig.json file we’ll u se “commonJs” as our module loader.
 Webpack will pack all files by the “require” statement transpiled from
the “import” statement.
Adding Angular 2.0 into the mix
 Replace our bootstrap with UpgradeAdapeter
 Upgrade ng-1 service to an injectable ng-2 service
 Making the upgraded service available on ng-1
Upgrading components
 Add the @Component decorator.
 Change the template to match ng2 data binding
 Export the component class.
 On the bootstraping TS file, downgrade it to ng-1
Summary
 We have started with Angular 1.x code
 We have changed it structure
 Angular 1.x code can look very similar to ng-2
 Migrating the code is not so difficult task
 Also, we can work with both ng-1 and ng-2 modules
side by side at the same application
Thank you
Ran Wahle
ran.wahle@gmail.clm
@ranwahle
Blog: https://blogs.microsoft.co.il/ranw
Ad

Recommended

Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2
Ross Dederer
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
Ross Dederer
 
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0
Oleksii Prohonnyi
 
The productive developer guide to Angular 2
The productive developer guide to Angular 2
Maurice De Beijer [MVP]
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
Angular2 with TypeScript
Angular2 with TypeScript
Rohit Bishnoi
 
Dive into Angular, part 1: Introduction
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
Angular 2 - An Introduction
Angular 2 - An Introduction
NexThoughts Technologies
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Dive into Angular, part 3: Performance
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Migrating to Angular 2
Migrating to Angular 2
FITC
 
Angular2 with type script
Angular2 with type script
Ravi Mone
 
Angular 4 and TypeScript
Angular 4 and TypeScript
Ahmed El-Kady
 
Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Angular 2: core concepts
Angular 2: core concepts
Codemotion
 
Dive into Angular, part 5: Experience
Dive into Angular, part 5: Experience
Oleksii Prohonnyi
 
Angular 4 - quick view
Angular 4 - quick view
Michael Haberman
 
Angular 5
Angular 5
Bartłomiej Narożnik
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
Sebastian Holstein
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
Commit University
 
Introduction to Angular2
Introduction to Angular2
Ivan Matiishyn
 
Angular Dependency Injection
Angular Dependency Injection
Nir Kaufman
 
Angular2 workshop
Angular2 workshop
Nir Kaufman
 
Angular2 - getting-ready
Angular2 - getting-ready
Nir Kaufman
 
Angular 2 - The Next Framework
Angular 2 - The Next Framework
Commit University
 
Angular 2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
Bibby Chung
 
1.3 y 1.4 subject and predicate
1.3 y 1.4 subject and predicate
paolyta28
 

More Related Content

What's hot (20)

Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Dive into Angular, part 3: Performance
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Migrating to Angular 2
Migrating to Angular 2
FITC
 
Angular2 with type script
Angular2 with type script
Ravi Mone
 
Angular 4 and TypeScript
Angular 4 and TypeScript
Ahmed El-Kady
 
Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Angular 2: core concepts
Angular 2: core concepts
Codemotion
 
Dive into Angular, part 5: Experience
Dive into Angular, part 5: Experience
Oleksii Prohonnyi
 
Angular 4 - quick view
Angular 4 - quick view
Michael Haberman
 
Angular 5
Angular 5
Bartłomiej Narożnik
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
Sebastian Holstein
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
Commit University
 
Introduction to Angular2
Introduction to Angular2
Ivan Matiishyn
 
Angular Dependency Injection
Angular Dependency Injection
Nir Kaufman
 
Angular2 workshop
Angular2 workshop
Nir Kaufman
 
Angular2 - getting-ready
Angular2 - getting-ready
Nir Kaufman
 
Angular 2 - The Next Framework
Angular 2 - The Next Framework
Commit University
 
Angular 2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Dive into Angular, part 3: Performance
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Migrating to Angular 2
Migrating to Angular 2
FITC
 
Angular2 with type script
Angular2 with type script
Ravi Mone
 
Angular 4 and TypeScript
Angular 4 and TypeScript
Ahmed El-Kady
 
Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Angular 2: core concepts
Angular 2: core concepts
Codemotion
 
Dive into Angular, part 5: Experience
Dive into Angular, part 5: Experience
Oleksii Prohonnyi
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
Sebastian Holstein
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
Commit University
 
Introduction to Angular2
Introduction to Angular2
Ivan Matiishyn
 
Angular Dependency Injection
Angular Dependency Injection
Nir Kaufman
 
Angular2 workshop
Angular2 workshop
Nir Kaufman
 
Angular2 - getting-ready
Angular2 - getting-ready
Nir Kaufman
 
Angular 2 - The Next Framework
Angular 2 - The Next Framework
Commit University
 
Angular 2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 

Viewers also liked (13)

Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
Bibby Chung
 
1.3 y 1.4 subject and predicate
1.3 y 1.4 subject and predicate
paolyta28
 
AngularJS Version 1.3
AngularJS Version 1.3
Nir Noy
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Carlo Bonamico
 
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Kazuhiro Yoshimoto
 
Componentes en angularjs 1.5
Componentes en angularjs 1.5
Hugo Biarge
 
第三回ありえる社内勉強会 「いわががのLombok」
第三回ありえる社内勉強会 「いわががのLombok」
yoshiaki iwanaga
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
Maxime Bernard
 
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
Kenneth Ceyer
 
The Angular road from 1.x to 2.0
The Angular road from 1.x to 2.0
Vassilis Pitsounis
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
Bibby Chung
 
1.3 y 1.4 subject and predicate
1.3 y 1.4 subject and predicate
paolyta28
 
AngularJS Version 1.3
AngularJS Version 1.3
Nir Noy
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Carlo Bonamico
 
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Kazuhiro Yoshimoto
 
Componentes en angularjs 1.5
Componentes en angularjs 1.5
Hugo Biarge
 
第三回ありえる社内勉強会 「いわががのLombok」
第三回ありえる社内勉強会 「いわががのLombok」
yoshiaki iwanaga
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
Maxime Bernard
 
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
Kenneth Ceyer
 
The Angular road from 1.x to 2.0
The Angular road from 1.x to 2.0
Vassilis Pitsounis
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Ad

Similar to Code migration from Angular 1.x to Angular 2.0 (20)

AngularConf2016 - A leap of faith !?
AngularConf2016 - A leap of faith !?
Alessandro Giorgetti
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
5 Key Benefits of Migration
5 Key Benefits of Migration
Happiest Minds Technologies
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
Manfred Steyer
 
Angular js 2.0 beta
Angular js 2.0 beta
Nagaraju Sangam
 
ngconf2015
ngconf2015
Anne Cypcar
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
Bruce Pentreath
 
Migrating From Angular 1.x to Angular 2+
Migrating From Angular 1.x to Angular 2+
Asim Hussain
 
An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
Angular 2 - How we got here?
Angular 2 - How we got here?
Marios Fakiolas
 
From Angular to Angular 2 via the UpgradeAdapter
From Angular to Angular 2 via the UpgradeAdapter
Tony May
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2
Nicolas PENNEC
 
Angular TS(typescript)
Angular TS(typescript)
Ivan Stepić
 
Angular js
Angular js
Felixits
 
Angular js
Angular js
Felixits
 
Download full ebook of Become a ninja with Angular Ninja Squad instant downlo...
Download full ebook of Become a ninja with Angular Ninja Squad instant downlo...
midhoojaben
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Best episode ever: Angular 2 from the perspective of an Angular 1 developer
Best episode ever: Angular 2 from the perspective of an Angular 1 developer
Peter Bouda
 
Angular 2
Angular 2
Travis van der Font
 
AngularConf2016 - A leap of faith !?
AngularConf2016 - A leap of faith !?
Alessandro Giorgetti
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
Manfred Steyer
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
Bruce Pentreath
 
Migrating From Angular 1.x to Angular 2+
Migrating From Angular 1.x to Angular 2+
Asim Hussain
 
An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
Angular 2 - How we got here?
Angular 2 - How we got here?
Marios Fakiolas
 
From Angular to Angular 2 via the UpgradeAdapter
From Angular to Angular 2 via the UpgradeAdapter
Tony May
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2
Nicolas PENNEC
 
Angular TS(typescript)
Angular TS(typescript)
Ivan Stepić
 
Angular js
Angular js
Felixits
 
Angular js
Angular js
Felixits
 
Download full ebook of Become a ninja with Angular Ninja Squad instant downlo...
Download full ebook of Become a ninja with Angular Ninja Squad instant downlo...
midhoojaben
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Best episode ever: Angular 2 from the perspective of an Angular 1 developer
Best episode ever: Angular 2 from the perspective of an Angular 1 developer
Peter Bouda
 
Ad

More from Ran Wahle (20)

Implementing promises with typescripts, step by step
Implementing promises with typescripts, step by step
Ran Wahle
 
HTML dialog element demonstration session
HTML dialog element demonstration session
Ran Wahle
 
MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleaned
Ran Wahle
 
Into React-DOM.pptx
Into React-DOM.pptx
Ran Wahle
 
Lets go to the background
Lets go to the background
Ran Wahle
 
Permissions api
Permissions api
Ran Wahle
 
Lets go vanilla
Lets go vanilla
Ran Wahle
 
Custom elements
Custom elements
Ran Wahle
 
Web workers
Web workers
Ran Wahle
 
Using legacy code with micro frontends
Using legacy code with micro frontends
Ran Wahle
 
Ngrx one-effect
Ngrx one-effect
Ran Wahle
 
Angular migration
Angular migration
Ran Wahle
 
Javascript async / await Frontend-IL
Javascript async / await Frontend-IL
Ran Wahle
 
Boost js state management
Boost js state management
Ran Wahle
 
Angular 2.0 change detection
Angular 2.0 change detection
Ran Wahle
 
Async patterns in javascript
Async patterns in javascript
Ran Wahle
 
Angular js 2
Angular js 2
Ran Wahle
 
Asyncawait in typescript
Asyncawait in typescript
Ran Wahle
 
What’s new in angular 2 - From FrontEnd IL Meetup
What’s new in angular 2 - From FrontEnd IL Meetup
Ran Wahle
 
angularJs Workshop
angularJs Workshop
Ran Wahle
 
Implementing promises with typescripts, step by step
Implementing promises with typescripts, step by step
Ran Wahle
 
HTML dialog element demonstration session
HTML dialog element demonstration session
Ran Wahle
 
MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleaned
Ran Wahle
 
Into React-DOM.pptx
Into React-DOM.pptx
Ran Wahle
 
Lets go to the background
Lets go to the background
Ran Wahle
 
Permissions api
Permissions api
Ran Wahle
 
Lets go vanilla
Lets go vanilla
Ran Wahle
 
Custom elements
Custom elements
Ran Wahle
 
Web workers
Web workers
Ran Wahle
 
Using legacy code with micro frontends
Using legacy code with micro frontends
Ran Wahle
 
Ngrx one-effect
Ngrx one-effect
Ran Wahle
 
Angular migration
Angular migration
Ran Wahle
 
Javascript async / await Frontend-IL
Javascript async / await Frontend-IL
Ran Wahle
 
Boost js state management
Boost js state management
Ran Wahle
 
Angular 2.0 change detection
Angular 2.0 change detection
Ran Wahle
 
Async patterns in javascript
Async patterns in javascript
Ran Wahle
 
Angular js 2
Angular js 2
Ran Wahle
 
Asyncawait in typescript
Asyncawait in typescript
Ran Wahle
 
What’s new in angular 2 - From FrontEnd IL Meetup
What’s new in angular 2 - From FrontEnd IL Meetup
Ran Wahle
 
angularJs Workshop
angularJs Workshop
Ran Wahle
 

Recently uploaded (20)

Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Digital Transformation: Automating the Placement of Medical Interns
Digital Transformation: Automating the Placement of Medical Interns
Safe Software
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
Sysinfo OST to PST Converter Infographic
Sysinfo OST to PST Converter Infographic
SysInfo Tools
 
Best Practice for LLM Serving in the Cloud
Best Practice for LLM Serving in the Cloud
Alluxio, Inc.
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
Y - Recursion The Hard Way GopherCon EU 2025
Y - Recursion The Hard Way GopherCon EU 2025
Eleanor McHugh
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
Advance Doctor Appointment Booking App With Online Payment
Advance Doctor Appointment Booking App With Online Payment
AxisTechnolabs
 
From Data Preparation to Inference: How Alluxio Speeds Up AI
From Data Preparation to Inference: How Alluxio Speeds Up AI
Alluxio, Inc.
 
Microsoft-365-Administrator-s-Guide1.pdf
Microsoft-365-Administrator-s-Guide1.pdf
mazharatknl
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Simplify Insurance Regulations with Compliance Management Software
Simplify Insurance Regulations with Compliance Management Software
Insurance Tech Services
 
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Digital Transformation: Automating the Placement of Medical Interns
Digital Transformation: Automating the Placement of Medical Interns
Safe Software
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
Sysinfo OST to PST Converter Infographic
Sysinfo OST to PST Converter Infographic
SysInfo Tools
 
Best Practice for LLM Serving in the Cloud
Best Practice for LLM Serving in the Cloud
Alluxio, Inc.
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
Y - Recursion The Hard Way GopherCon EU 2025
Y - Recursion The Hard Way GopherCon EU 2025
Eleanor McHugh
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
Advance Doctor Appointment Booking App With Online Payment
Advance Doctor Appointment Booking App With Online Payment
AxisTechnolabs
 
From Data Preparation to Inference: How Alluxio Speeds Up AI
From Data Preparation to Inference: How Alluxio Speeds Up AI
Alluxio, Inc.
 
Microsoft-365-Administrator-s-Guide1.pdf
Microsoft-365-Administrator-s-Guide1.pdf
mazharatknl
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Simplify Insurance Regulations with Compliance Management Software
Simplify Insurance Regulations with Compliance Management Software
Insurance Tech Services
 
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 

Code migration from Angular 1.x to Angular 2.0

  • 1. From 1.x to 2.0 Ran Wahle
  • 2. Agenda  A little about Angular 2.0  A little chat application with Angular 1.x  Reorganizing modules  Using Module loader  Switching to typescript  Using angular 1.5 components  Using webpack as our module loader  Make hybrid application with ng-2  Gradually swithing to ng-2
  • 3. A little about myself  Full-stack developer  Enthusiastic front-end developer  Poor UI designer  Participated in writing Developing an Angular 2 Edge
  • 4. A little about Angular 2.0  A whole new rewrite  No $scope (and no $scope.$apply/$applyAsync)  A whole new change detection system  No modules (not in the Angular 1.x way)  Supports new standards
  • 5. A little about rc-5  NgModule decorator  AoT Compilation
  • 6. What is our goal?  Gradually migrate Angular 1.x application  During the process, enjoy Angular 2.0 capabilities in our Angular 1.x application
  • 7. What do we need?  Prepare our application  Blend Angular 2.0 in  Gradually upgrade
  • 8. A little chat application from 2012  One module  Every service, controller, directive, component and filter will be registered to it.  This one module is bootstraped to the document  Uses socket.io for chating  Needs to be migrated gradually (well, it did if it was big)
  • 9. What have we done already  Used controllerAs syntax  No function or field is declared directly on the scope
  • 10. Restructuring modules  Every controller / directive / service will now have its own module  Every module will have its own dependencies  The main module depend on other modules
  • 11. Load modules with AMD  Remove all script tags from the application’s HTML page  Declare JS dependencies directly in JS files
  • 12. Switch to TypeScript  Why?  Actually we can rename our ‘js’ files to ‘ts’ and correct compiler errors in case there are  All our controllers / components/ services can be switched to classes  We may reduce the prototype
  • 13. Using Angular 1.5 component  Why? This is the closest we can get to Angular 2.0 component  Controller that is bound to an HTML page can be easily replaced with a component and template  Template directive, can be replaced even easier
  • 14. Using WebPack  It is not necessary for the migration, but usefull nevertheless  Our TS code can use “import“ statements  On our tsConfig.json file we’ll u se “commonJs” as our module loader.  Webpack will pack all files by the “require” statement transpiled from the “import” statement.
  • 15. Adding Angular 2.0 into the mix  Replace our bootstrap with UpgradeAdapeter  Upgrade ng-1 service to an injectable ng-2 service  Making the upgraded service available on ng-1
  • 16. Upgrading components  Add the @Component decorator.  Change the template to match ng2 data binding  Export the component class.  On the bootstraping TS file, downgrade it to ng-1
  • 17. Summary  We have started with Angular 1.x code  We have changed it structure  Angular 1.x code can look very similar to ng-2  Migrating the code is not so difficult task  Also, we can work with both ng-1 and ng-2 modules side by side at the same application
  • 18. Thank you Ran Wahle [email protected] @ranwahle Blog: https://blogs.microsoft.co.il/ranw