SlideShare a Scribd company logo
1 of 49
A leap of faith !?
YOU NEED A PLAN... TO SURVIVE AN NG1 TO
NG2 MIGRATION
#angularconf16
http://2016.angularconf.it/
https://github.com/AGiorgetti/
AngularConf2016.git
What this talk is NOT about
This is not an Angular 2 introduction.
Before any migration you should already know at least the basics of the
‘new’ framework.
This talk is about things you might 'need' to consider in order to start the
migration journey.
Do NOT migrate to learn
You should not start this process just to 'try out‘ Angular 2.
Start a new pet project or a create a prototype (maybe something used
internally).
Learn the framework, understand what you CAN and CANNOT do.
Ask yourself some questions…
Do I want to migrate because ng2 is the hot new thing ?
What’s the current state of my project ?
For how long will I maintain this project ?
Will ‘vNext’ be a complete overhaul/rewrite ?
What's my priority in maintaining the current code base and keep
delivering values to my customers ?
Do I have a S.L.A. ?
More questions...
What’s the size of my project ?
How many external dependencies does my project have ?
Do they have an Angular 2 implementation ?
Do they play well with Angular 2 ?
Should look for something different ?
What’s the team skill level ?
Also...
Am I ready to bring in new technologies (and new tools) ?
Task Runners
Module Loaders
Build Pipeline
Angular CLI
Material Design
Angular Universal
Angular Mobile Toolkit
WTF are those ZONES ?!
OMG! TypeScript ?!
I’m not here to tell you…
…that Angular 2 is: New and Shiny, FASTER (way faster), built on
modern web standards, supports many interesting features like Lazy
Loading, Server Side Rendering…
You already know that!
I’m not here to tell you that you NEED Angular 2 at all.
It’s up to you to decide if you want Angular 2 in your project, I’m not
taking any responsibility.
Strategies
You'll have 3 options to migrate:
1) Don't do it.
2) Full rewrite (possibly keeping 2 codebases, or stopping the
development of you previous one).
3) Embrace a ‘minimize risk / potentially slow’ side by side migration
process.
So... Option 3
It turns out that a migration ‘is doable’ and the Angular team offers you
a tool to do just that:
ngUpgrade
Technically it allows for the coexistence of Angular 1 and Angular 2 in the
same application.
Both the frameworks will be active and will control independent portions of
the DOM with ngUpgrade being the glue between the two worlds, doing the
heavy job of keeping things in sync.
How do ngUpgrade work?
Angular 1 directive
Angular 2 service
Angular 2 component
Angular 2 serviceAngular 1 service
Angular 1 service
Angular 1 directiveAngular 1 directive
Cool! ....is it that easy ?
Kinda… but there are some limitations:
The Outer node must be an Angular 1 application.
Only the services in Angular 2 Root Injector can be downgraded.
You need to use string tokens to inject Angular 1 services in Angular 2
components: @Inject(<token>)
The ‘framework switch’ only happens inside the children of a Directive or
Component DOM node.
Angular 1 Angular 2
Controllers Components
Directives Components
Services Services
The upgrade-downgrade map
Angular 1 Angular 2
Structural Directives Structural Directives
Filters Pipes
CAN UPGRADE
CANNOT UPGRADE (rewrite)
The ‘big ball of mud’ effect!
There's a very high risk of confusion, with a mixture of both frameworks,
‘different languages’ and coding styles that will hang around forever.
You should head towards a clean migration path that:
Minimizes Risks.
Allows for 'small' changes over time, that can improve even
your current Angular 1 code base.
Planning is the key!
You’ll want a plan that allows you to:
Keep developing and maintaining your application, deliverying value to your
customers (which is always your n°1 priority).
Gradually introduce ‘mutations’ in the way you code your product.
In the meanwhile preparing the ground for the ‘real’ migration.
Keep the code as clean as possible (following an internal styleguide).
A 2-phases plan: Preparation
This phase has almost nothing to do with Angular 2; it’s devoted to
changing the way you build your Angular 1 application today:
Bring in some of the tools we’ll extensively use in Angular 2.
Say hi to TypeScript.
(optional) Use a module loader and change your build pipeline.
Upgrade to the latest version of ng1 (double check the libraries).
Analyze and refactor the application: find and fix the weak points and
anti-patterns.
A 2-phases plan: Migration
Migration
Add the new Angular 2 framework to the project.
Setup up a mixed environment using ngUpgrade.
Write your new code in Angular 2.
Migrate Angular 1 code along the way.
Replace the old Angular 1 Router and clean-up.
Phase 1 -
Preparation
Assessment
Review your project and do a proper check-up:
 Angular version.
 External libraries.
Update to the latest version of Angular (anything from 1.3.x will be
good).
Consider replacing unamaintained external libraries, look for libraries
that will have Angular 2 support.
Look for what’s forbidden
You might have heard that: Angular 2 has no $scope!
Everything works in isolation, so no more: ng-controller, ng-include or
shared $scope, live with that!
Compile(): is not supported anymore, Angular 2 has it’s own way to deal
with the DOM.
Some features were removed: no more ‘replace, terminal, priority’.
Filters are no more, we now have @pipe… Be prepared to rewrite them.
(optional) Module Loaders
Consider switching to a module loader to deliver your application
instead of all those <script> tags.
Some options are: SystemJS, WebPack, Browserify, etc…
Main Drawbacks:
It will require an overhaul of your building pipeline.
It will probably require a massive refactoring in you JS files.
 You can delay this step and wait for Angular 2 migration to introduce a
module loader.
Welcome TypeScript!
Some of you might think of it as a necessary evil.
But it has some benefits:
Once you get accustomed to it, it can really increase your productivity
helping you avoid trivial bugs (it also has very good tooling).
Allows you to use ES2015 JavaScript Syntax.
Will also ‘force’ some structure in your code base.
Write ng1 code in a ‘good’ way
(with TypeScript)
Write your Controllers and Services as classes:
It will help you to get rid of the $scope (controllerAs, bindToController).
Take advantage of type checking, interfaces, intellisense, refctoring and
all the other goodies.
It will ease the code migration to Angular 2.
If you upgraded to angular 1.5.x consider using the new ‘component api’ to
define directives, it’s really very similar to how you’ll define components in
Angular 2.
NG1 TS – Service as class
The function becomes a class.
Dependency injection is specified with a static property.
Start using Type declarations.
NG1 TS – Service as class
‘this’ to refererence the members of the class.
NG1 TS – Service as class
Use the Arrow Syntax to define callback functions:
So the ‘this’ always refers to the instance of the class
The function becomes a class.
Dependency injection is specified with a static property.
Start using Type declarations.
NG1 TS – Controller as Class
NG1 TS – Controller as Class
The initialization goes in the constructor
NG1 TS – Controller as Class
‘this’ to refererence the members of the class.
Use the Arrow Syntax to define callback functions:
So the ‘this’ always refers to the instance of the class
NG1 TS – Controller as Class
The ‘this’ is really important when it comes
to classes.
You should know how it work!
TypeScript is your friend but…
Rewriting your code might not be always straightfoward… and it can be
a process that require some time.
TypeScript hides some JavaScript’s complexities (like the use of
prototypes and the ‘this’ management).
There are some special cases in which you need to know what the
compiler does in order to avoid subtile bugs.
Fix / Refactor the existing code
Fix your directives removing the incompatible features.
Warning: NON TRIVIAL ACTIVITIES INVOLVED!!
No more shared scope: everything should use an isolated scope
(remove all the ng-include / ng-controller and create explicit directives).
Use the ‘controllerAs’ and ‘bindToController’ syntax for your bindings.
Remove all the non supported features: replace, terminal, etc. If you
cannot do it, you’ll be forced to rethink the UI.
It can also be a good idea change the project structure to a ‘Folder by
Feature’ approach.
Take a look at the Angular 1 Style Guide for other anti-patterns.
Phase 2 -
Migration
Angular 2 Setup
You’ll need to find a way to add Angular 2 that suits your project:
The Outermost element MUST be an Angular 1 application.
There are several options you can consider:
o The Angular quickstart guide.
o A seeding project.
o Code generators (like angular-cli, yeoman, etc…).
All them involve the introduction of a module loader.
All of them will require some changes to your build pipeline process.
Angular 2 setup - do it simple
Start by following the quickstart guide.
Use ‘SystemJS’ as your first module loader.
Keep your build pipeline simple at start (avoid bundling and minification
in the early stage of the migration process).
Once the migration process is on its way, you can rework the build
process adding the other stages and optionally replace the module
loader.
Project Configuration
Add the ng2 libraries to the
package.json.
Modify the Application template
to load Angular 2 required
libraries.
Add your SystemJS configuration
file to load the new application
entry point.
ngUpgrade… finally!
This module will handle the cooperation of Angular 1 and Angular 2:
It will take over the application bootstrap process.
Will be used to downgrade Angular 2 Components and Services so they
can be used in an Angular 1 controlled environment.
Will be used to upgrade Angular 1 Directives and Services so they can
be used in an Angular 2 controlled environment.
Will take care of keeping the change detection mechanics in sync.
ngUpgrade Hybrid Bootstrap
You’ll need to switch to the manual bootstrap and delegate the startup code do
ngUpgrade’s UpgradeAdapter:
Remove your old Angular 1 bootstrapping code.
In the main Angular 2 NgModule:
Import the UpgradeAdapter
import { UpgradeAdapter } from '@angular/upgrade';
Create a single instance of the adapter
const adapter = new UpgradeAdapter(forwardRef(() => AppModule));
Bootstrap the application through the adapter
adapter.bootstrap(document.body, ["app"], { strictDi: true });
Downgrade Angular 2
Components and Services
In the main NgModule file:
Downgrade a Component
angular.module('app').directive('ng2HeartbeatView',
adapter.downgradeNg2Component(HeartbeatView));
Downgrade a Service
angular.module('app').service('ng2LogService',
adapter.downgradeNg2Provider(LogsService));
Upgrade ng1 directives and
services
In the main NgModule file:
Upgrade a Directive (in the NgModule declaration list)
@NgModule({
declarations: [
adapter.upgradeNg1Component("sidMonitoringHeartbeats")
]
})
Upgrade a Service (not in the NgModule providers list, it will be included in the root
injector anyway)
adapter.upgradeNg1Provider('logsService');
Migrate Service ng1 -> ng2
Angular 1 Angular 2
Service registration replaced by @Injectable() decorator.
The service class need to be registered in the providers list
of the root module.
Migrate Service ng1 -> ng2
Angular 1 Angular 2
Injection is made via constructor parameters and Type tokens.
Optionally using the @Inject(<name>) attribute.
Migrate Service ng1 -> ng2
Angular 1 Angular 2
Fight with the API changes.
Migrate directive ng1 -> ng2
The directive declaration is replaced by the @Component() decorator.
The Component class need to be added to the declarations list of the NgModule
Angular 1 Angular 2
Migrate directive ng1 -> ng2
Angular 1 Angular 2
Injection is made via constructor parameters.
Optionally using the @Inject(<name>) attribute.
Migrate directive ng1 -> ng2
Angular 1 Angular 2
Initialization and cleanup code go in the lifecycle hooks.
With angular 1.5.x you have almost the same lifecycle hooks for the component api,
migration would have been even easier!
Filters: rewrite as Pipes
You cannot Upgrade or Downgrade them: live with the duplicated code.
The Last Step: Routing,
Bootstrap & Clean-up
Let’s suppose you have migrated all your directives to components…
The Router (and the application template) will be the last thing to be
replaced!
Now you can get rid of the UpgradeAdapter and switch to the native
Angular 2 bootstrap.
Finally you can wave goodbye to all the Angular 1 dependencies and
libraries!
… and here we are, on the
path to the Holy Grail!
Alessandro Giorgetti
SID s.r.l.
member of: DotNetMarche / DevMarche
Facebook: https://www.facebook.com/giorgetti.alessandro
Twitter: @a_giorgetti
LinkedIn: https://it.linkedin.com/in/giorgettialessandro
E-mail: alessandro.giorgetti@live.com
Blog: www.primordialcode.com

More Related Content

What's hot

The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5Johannes Weber
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJSKnoldus Inc.
 
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Ran Wahle
 
Angular 2: core concepts
Angular 2: core conceptsAngular 2: core concepts
Angular 2: core conceptsCodemotion
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation洪 鹏发
 
Angular2 with TypeScript
Angular2 with TypeScript Angular2 with TypeScript
Angular2 with TypeScript Rohit Bishnoi
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Ross Dederer
 
The productive developer guide to Angular 2
The productive developer guide to Angular 2The productive developer guide to Angular 2
The productive developer guide to Angular 2Maurice De Beijer [MVP]
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesMarios Fakiolas
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??Laurent Duveau
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Minko Gechev
 
Building scalable modular app with Angular2 concept
Building scalable modular app with Angular2 conceptBuilding scalable modular app with Angular2 concept
Building scalable modular app with Angular2 conceptkzw
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2 Apptension
 

What's hot (20)

The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0
 
Angular 2
Angular 2Angular 2
Angular 2
 
Angular 2: core concepts
Angular 2: core conceptsAngular 2: core concepts
Angular 2: core concepts
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
Angular2 with TypeScript
Angular2 with TypeScript Angular2 with TypeScript
Angular2 with TypeScript
 
Introduction to react js
Introduction to react jsIntroduction to react js
Introduction to react js
 
React workshop
React workshopReact workshop
React workshop
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
Angular 2 - An Introduction
Angular 2 - An IntroductionAngular 2 - An Introduction
Angular 2 - An Introduction
 
Angular js
Angular jsAngular js
Angular js
 
The productive developer guide to Angular 2
The productive developer guide to Angular 2The productive developer guide to Angular 2
The productive developer guide to Angular 2
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directives
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Building scalable modular app with Angular2 concept
Building scalable modular app with Angular2 conceptBuilding scalable modular app with Angular2 concept
Building scalable modular app with Angular2 concept
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
 

Viewers also liked

Monuments of human conceit
Monuments of human conceitMonuments of human conceit
Monuments of human conceitsobiana
 
Shakespeare
ShakespeareShakespeare
Shakespearemegapick
 
Abusing bleeding edge web standards for appsec glory
Abusing bleeding edge web standards for appsec gloryAbusing bleeding edge web standards for appsec glory
Abusing bleeding edge web standards for appsec gloryPriyanka Aash
 
Hardening AWS environment and automating incidence response for AWS cmpromises
Hardening AWS environment and automating incidence response for AWS cmpromisesHardening AWS environment and automating incidence response for AWS cmpromises
Hardening AWS environment and automating incidence response for AWS cmpromisesPriyanka Aash
 
Red Dirt Ruby Conference
Red Dirt Ruby ConferenceRed Dirt Ruby Conference
Red Dirt Ruby ConferenceJohn Woodell
 
More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...
More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...
More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...ePortfolios Australia
 
How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...
How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...
How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...Amazon Web Services
 
Mythology lesson 9 apollo
Mythology lesson 9 apolloMythology lesson 9 apollo
Mythology lesson 9 apollokelliemason
 
Attacking SDN infrastructure: Are we ready for the next gen networking
Attacking SDN infrastructure: Are we ready for the next gen networkingAttacking SDN infrastructure: Are we ready for the next gen networking
Attacking SDN infrastructure: Are we ready for the next gen networkingPriyanka Aash
 
Intra process memory protection for applications on ARM and x86
Intra process memory protection for applications on ARM and x86Intra process memory protection for applications on ARM and x86
Intra process memory protection for applications on ARM and x86Priyanka Aash
 
«Real Time» Web Applications with SignalR in ASP.NET
«Real Time» Web Applications with SignalR in ASP.NET«Real Time» Web Applications with SignalR in ASP.NET
«Real Time» Web Applications with SignalR in ASP.NETAlessandro Giorgetti
 
what is Iampic pentameter and a sonnet?
what is Iampic pentameter and a sonnet?what is Iampic pentameter and a sonnet?
what is Iampic pentameter and a sonnet?lynzia
 
TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!Alessandro Giorgetti
 
1 blankverse-conceit-soliloquy
1 blankverse-conceit-soliloquy1 blankverse-conceit-soliloquy
1 blankverse-conceit-soliloquylarchmeany1
 

Viewers also liked (20)

Monuments of human conceit
Monuments of human conceitMonuments of human conceit
Monuments of human conceit
 
Shakespeare
ShakespeareShakespeare
Shakespeare
 
Sonnet
SonnetSonnet
Sonnet
 
Abusing bleeding edge web standards for appsec glory
Abusing bleeding edge web standards for appsec gloryAbusing bleeding edge web standards for appsec glory
Abusing bleeding edge web standards for appsec glory
 
Hardening AWS environment and automating incidence response for AWS cmpromises
Hardening AWS environment and automating incidence response for AWS cmpromisesHardening AWS environment and automating incidence response for AWS cmpromises
Hardening AWS environment and automating incidence response for AWS cmpromises
 
Red Dirt Ruby Conference
Red Dirt Ruby ConferenceRed Dirt Ruby Conference
Red Dirt Ruby Conference
 
Acceptance tests
Acceptance testsAcceptance tests
Acceptance tests
 
More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...
More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...
More than just what you have learnt: Your ePortfolio=learnt + love+created-Ch...
 
The Road to the Cloud
The Road to the CloudThe Road to the Cloud
The Road to the Cloud
 
How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...
How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...
How Crownbet Disrupted the Australian Market, One Instance at a Time - Sessio...
 
Mythology lesson 9 apollo
Mythology lesson 9 apolloMythology lesson 9 apollo
Mythology lesson 9 apollo
 
Employee selection
Employee selectionEmployee selection
Employee selection
 
Attacking SDN infrastructure: Are we ready for the next gen networking
Attacking SDN infrastructure: Are we ready for the next gen networkingAttacking SDN infrastructure: Are we ready for the next gen networking
Attacking SDN infrastructure: Are we ready for the next gen networking
 
Intra process memory protection for applications on ARM and x86
Intra process memory protection for applications on ARM and x86Intra process memory protection for applications on ARM and x86
Intra process memory protection for applications on ARM and x86
 
«Real Time» Web Applications with SignalR in ASP.NET
«Real Time» Web Applications with SignalR in ASP.NET«Real Time» Web Applications with SignalR in ASP.NET
«Real Time» Web Applications with SignalR in ASP.NET
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
what is Iampic pentameter and a sonnet?
what is Iampic pentameter and a sonnet?what is Iampic pentameter and a sonnet?
what is Iampic pentameter and a sonnet?
 
TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!
 
Reflection paper
Reflection paperReflection paper
Reflection paper
 
1 blankverse-conceit-soliloquy
1 blankverse-conceit-soliloquy1 blankverse-conceit-soliloquy
1 blankverse-conceit-soliloquy
 

Similar to AngularConf2016 - A leap of faith !?

Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus Inc.
 
Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?Marios Fakiolas
 
Angular.ppt
Angular.pptAngular.ppt
Angular.pptMytrux1
 
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]Alex Ershov
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2Dor Moshe
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshareSaleemMalik52
 
Angular TS(typescript)
Angular TS(typescript)Angular TS(typescript)
Angular TS(typescript)Ivan Stepić
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIJim Lynch
 
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.0Angular 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.0Carlo Bonamico
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular applicationSuresh Patidar
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon
 
Angular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web ApplicationsAngular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web ApplicationsAlbiorix Technology
 
Getting Started to take an architectural decision in AngularJs.
Getting Started to take an architectural decision in AngularJs.Getting Started to take an architectural decision in AngularJs.
Getting Started to take an architectural decision in AngularJs.Cauê Alves
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Bruce Pentreath
 

Similar to AngularConf2016 - A leap of faith !? (20)

Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?
 
Angular.ppt
Angular.pptAngular.ppt
Angular.ppt
 
Angular 2
Angular 2Angular 2
Angular 2
 
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
5 Key Benefits of Migration
5 Key Benefits of Migration5 Key Benefits of Migration
5 Key Benefits of Migration
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
 
Angular TS(typescript)
Angular TS(typescript)Angular TS(typescript)
Angular TS(typescript)
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
 
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.0Angular 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
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular application
 
Ng talk
Ng talkNg talk
Ng talk
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
 
Angular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web ApplicationsAngular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web Applications
 
How Does Angular Work?
How Does Angular Work?How Does Angular Work?
How Does Angular Work?
 
Angular
AngularAngular
Angular
 
Getting Started to take an architectural decision in AngularJs.
Getting Started to take an architectural decision in AngularJs.Getting Started to take an architectural decision in AngularJs.
Getting Started to take an architectural decision in AngularJs.
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
 
Angular
AngularAngular
Angular
 

More from Alessandro Giorgetti

The Big Picture - Integrating Buzzwords
The Big Picture - Integrating BuzzwordsThe Big Picture - Integrating Buzzwords
The Big Picture - Integrating BuzzwordsAlessandro Giorgetti
 
DNM19 Sessione1 Orchard Primo Impatto (ita)
DNM19 Sessione1 Orchard Primo Impatto (ita)DNM19 Sessione1 Orchard Primo Impatto (ita)
DNM19 Sessione1 Orchard Primo Impatto (ita)Alessandro Giorgetti
 
DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)Alessandro Giorgetti
 

More from Alessandro Giorgetti (6)

Microservices Architecture
Microservices ArchitectureMicroservices Architecture
Microservices Architecture
 
Let's talk about... Microservices
Let's talk about... MicroservicesLet's talk about... Microservices
Let's talk about... Microservices
 
The Big Picture - Integrating Buzzwords
The Big Picture - Integrating BuzzwordsThe Big Picture - Integrating Buzzwords
The Big Picture - Integrating Buzzwords
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
 
DNM19 Sessione1 Orchard Primo Impatto (ita)
DNM19 Sessione1 Orchard Primo Impatto (ita)DNM19 Sessione1 Orchard Primo Impatto (ita)
DNM19 Sessione1 Orchard Primo Impatto (ita)
 
DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)DNM19 Sessione2 Orchard Temi e Layout (Ita)
DNM19 Sessione2 Orchard Temi e Layout (Ita)
 

Recently uploaded

Malaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptxMalaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptxMok TH
 
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanWorkshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanNeo4j
 
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfImplementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfVictor Lopez
 
IT Software Development Resume, Vaibhav jha 2024
IT Software Development Resume, Vaibhav jha 2024IT Software Development Resume, Vaibhav jha 2024
IT Software Development Resume, Vaibhav jha 2024vaibhav130304
 
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesGraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesNeo4j
 
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024Primacy Infotech
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfSrushith Repakula
 
The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)Roberto Bettazzoni
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Andrea Goulet
 
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAOpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAShane Coughlan
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdftimtebeek1
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletAndrea Goulet
 
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...OnePlan Solutions
 
The Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion ProductionThe Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion ProductionWave PLM
 
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...Marko Lohert
 
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Andreas Granig
 
architecting-ai-in-the-enterprise-apis-and-applications.pdf
architecting-ai-in-the-enterprise-apis-and-applications.pdfarchitecting-ai-in-the-enterprise-apis-and-applications.pdf
architecting-ai-in-the-enterprise-apis-and-applications.pdfWSO2
 
how-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdfhow-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdfMehmet Akar
 

Recently uploaded (20)

Malaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptxMalaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptx
 
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanWorkshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
 
AI Hackathon.pptx
AI                        Hackathon.pptxAI                        Hackathon.pptx
AI Hackathon.pptx
 
What is an API Development- Definition, Types, Specifications, Documentation.pdf
What is an API Development- Definition, Types, Specifications, Documentation.pdfWhat is an API Development- Definition, Types, Specifications, Documentation.pdf
What is an API Development- Definition, Types, Specifications, Documentation.pdf
 
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfImplementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
 
IT Software Development Resume, Vaibhav jha 2024
IT Software Development Resume, Vaibhav jha 2024IT Software Development Resume, Vaibhav jha 2024
IT Software Development Resume, Vaibhav jha 2024
 
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesGraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
 
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdf
 
The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAOpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdf
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea Goulet
 
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
 
The Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion ProductionThe Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion Production
 
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
 
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
 
architecting-ai-in-the-enterprise-apis-and-applications.pdf
architecting-ai-in-the-enterprise-apis-and-applications.pdfarchitecting-ai-in-the-enterprise-apis-and-applications.pdf
architecting-ai-in-the-enterprise-apis-and-applications.pdf
 
how-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdfhow-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdf
 

AngularConf2016 - A leap of faith !?

  • 1. A leap of faith !? YOU NEED A PLAN... TO SURVIVE AN NG1 TO NG2 MIGRATION #angularconf16 http://2016.angularconf.it/
  • 3. What this talk is NOT about This is not an Angular 2 introduction. Before any migration you should already know at least the basics of the ‘new’ framework. This talk is about things you might 'need' to consider in order to start the migration journey.
  • 4. Do NOT migrate to learn You should not start this process just to 'try out‘ Angular 2. Start a new pet project or a create a prototype (maybe something used internally). Learn the framework, understand what you CAN and CANNOT do.
  • 5. Ask yourself some questions… Do I want to migrate because ng2 is the hot new thing ? What’s the current state of my project ? For how long will I maintain this project ? Will ‘vNext’ be a complete overhaul/rewrite ? What's my priority in maintaining the current code base and keep delivering values to my customers ? Do I have a S.L.A. ?
  • 6. More questions... What’s the size of my project ? How many external dependencies does my project have ? Do they have an Angular 2 implementation ? Do they play well with Angular 2 ? Should look for something different ? What’s the team skill level ?
  • 7. Also... Am I ready to bring in new technologies (and new tools) ? Task Runners Module Loaders Build Pipeline Angular CLI Material Design Angular Universal Angular Mobile Toolkit WTF are those ZONES ?! OMG! TypeScript ?!
  • 8. I’m not here to tell you… …that Angular 2 is: New and Shiny, FASTER (way faster), built on modern web standards, supports many interesting features like Lazy Loading, Server Side Rendering… You already know that! I’m not here to tell you that you NEED Angular 2 at all. It’s up to you to decide if you want Angular 2 in your project, I’m not taking any responsibility.
  • 9. Strategies You'll have 3 options to migrate: 1) Don't do it. 2) Full rewrite (possibly keeping 2 codebases, or stopping the development of you previous one). 3) Embrace a ‘minimize risk / potentially slow’ side by side migration process.
  • 10. So... Option 3 It turns out that a migration ‘is doable’ and the Angular team offers you a tool to do just that: ngUpgrade Technically it allows for the coexistence of Angular 1 and Angular 2 in the same application. Both the frameworks will be active and will control independent portions of the DOM with ngUpgrade being the glue between the two worlds, doing the heavy job of keeping things in sync.
  • 11. How do ngUpgrade work? Angular 1 directive Angular 2 service Angular 2 component Angular 2 serviceAngular 1 service Angular 1 service Angular 1 directiveAngular 1 directive
  • 12. Cool! ....is it that easy ? Kinda… but there are some limitations: The Outer node must be an Angular 1 application. Only the services in Angular 2 Root Injector can be downgraded. You need to use string tokens to inject Angular 1 services in Angular 2 components: @Inject(<token>) The ‘framework switch’ only happens inside the children of a Directive or Component DOM node.
  • 13. Angular 1 Angular 2 Controllers Components Directives Components Services Services The upgrade-downgrade map Angular 1 Angular 2 Structural Directives Structural Directives Filters Pipes CAN UPGRADE CANNOT UPGRADE (rewrite)
  • 14. The ‘big ball of mud’ effect! There's a very high risk of confusion, with a mixture of both frameworks, ‘different languages’ and coding styles that will hang around forever. You should head towards a clean migration path that: Minimizes Risks. Allows for 'small' changes over time, that can improve even your current Angular 1 code base.
  • 15. Planning is the key! You’ll want a plan that allows you to: Keep developing and maintaining your application, deliverying value to your customers (which is always your n°1 priority). Gradually introduce ‘mutations’ in the way you code your product. In the meanwhile preparing the ground for the ‘real’ migration. Keep the code as clean as possible (following an internal styleguide).
  • 16. A 2-phases plan: Preparation This phase has almost nothing to do with Angular 2; it’s devoted to changing the way you build your Angular 1 application today: Bring in some of the tools we’ll extensively use in Angular 2. Say hi to TypeScript. (optional) Use a module loader and change your build pipeline. Upgrade to the latest version of ng1 (double check the libraries). Analyze and refactor the application: find and fix the weak points and anti-patterns.
  • 17. A 2-phases plan: Migration Migration Add the new Angular 2 framework to the project. Setup up a mixed environment using ngUpgrade. Write your new code in Angular 2. Migrate Angular 1 code along the way. Replace the old Angular 1 Router and clean-up.
  • 19. Assessment Review your project and do a proper check-up:  Angular version.  External libraries. Update to the latest version of Angular (anything from 1.3.x will be good). Consider replacing unamaintained external libraries, look for libraries that will have Angular 2 support.
  • 20. Look for what’s forbidden You might have heard that: Angular 2 has no $scope! Everything works in isolation, so no more: ng-controller, ng-include or shared $scope, live with that! Compile(): is not supported anymore, Angular 2 has it’s own way to deal with the DOM. Some features were removed: no more ‘replace, terminal, priority’. Filters are no more, we now have @pipe… Be prepared to rewrite them.
  • 21. (optional) Module Loaders Consider switching to a module loader to deliver your application instead of all those <script> tags. Some options are: SystemJS, WebPack, Browserify, etc… Main Drawbacks: It will require an overhaul of your building pipeline. It will probably require a massive refactoring in you JS files.  You can delay this step and wait for Angular 2 migration to introduce a module loader.
  • 22. Welcome TypeScript! Some of you might think of it as a necessary evil. But it has some benefits: Once you get accustomed to it, it can really increase your productivity helping you avoid trivial bugs (it also has very good tooling). Allows you to use ES2015 JavaScript Syntax. Will also ‘force’ some structure in your code base.
  • 23. Write ng1 code in a ‘good’ way (with TypeScript) Write your Controllers and Services as classes: It will help you to get rid of the $scope (controllerAs, bindToController). Take advantage of type checking, interfaces, intellisense, refctoring and all the other goodies. It will ease the code migration to Angular 2. If you upgraded to angular 1.5.x consider using the new ‘component api’ to define directives, it’s really very similar to how you’ll define components in Angular 2.
  • 24. NG1 TS – Service as class The function becomes a class. Dependency injection is specified with a static property. Start using Type declarations.
  • 25. NG1 TS – Service as class ‘this’ to refererence the members of the class.
  • 26. NG1 TS – Service as class Use the Arrow Syntax to define callback functions: So the ‘this’ always refers to the instance of the class
  • 27. The function becomes a class. Dependency injection is specified with a static property. Start using Type declarations. NG1 TS – Controller as Class
  • 28. NG1 TS – Controller as Class The initialization goes in the constructor
  • 29. NG1 TS – Controller as Class ‘this’ to refererence the members of the class. Use the Arrow Syntax to define callback functions: So the ‘this’ always refers to the instance of the class
  • 30. NG1 TS – Controller as Class The ‘this’ is really important when it comes to classes. You should know how it work!
  • 31. TypeScript is your friend but… Rewriting your code might not be always straightfoward… and it can be a process that require some time. TypeScript hides some JavaScript’s complexities (like the use of prototypes and the ‘this’ management). There are some special cases in which you need to know what the compiler does in order to avoid subtile bugs.
  • 32. Fix / Refactor the existing code Fix your directives removing the incompatible features. Warning: NON TRIVIAL ACTIVITIES INVOLVED!! No more shared scope: everything should use an isolated scope (remove all the ng-include / ng-controller and create explicit directives). Use the ‘controllerAs’ and ‘bindToController’ syntax for your bindings. Remove all the non supported features: replace, terminal, etc. If you cannot do it, you’ll be forced to rethink the UI. It can also be a good idea change the project structure to a ‘Folder by Feature’ approach. Take a look at the Angular 1 Style Guide for other anti-patterns.
  • 34. Angular 2 Setup You’ll need to find a way to add Angular 2 that suits your project: The Outermost element MUST be an Angular 1 application. There are several options you can consider: o The Angular quickstart guide. o A seeding project. o Code generators (like angular-cli, yeoman, etc…). All them involve the introduction of a module loader. All of them will require some changes to your build pipeline process.
  • 35. Angular 2 setup - do it simple Start by following the quickstart guide. Use ‘SystemJS’ as your first module loader. Keep your build pipeline simple at start (avoid bundling and minification in the early stage of the migration process). Once the migration process is on its way, you can rework the build process adding the other stages and optionally replace the module loader.
  • 36. Project Configuration Add the ng2 libraries to the package.json. Modify the Application template to load Angular 2 required libraries. Add your SystemJS configuration file to load the new application entry point.
  • 37. ngUpgrade… finally! This module will handle the cooperation of Angular 1 and Angular 2: It will take over the application bootstrap process. Will be used to downgrade Angular 2 Components and Services so they can be used in an Angular 1 controlled environment. Will be used to upgrade Angular 1 Directives and Services so they can be used in an Angular 2 controlled environment. Will take care of keeping the change detection mechanics in sync.
  • 38. ngUpgrade Hybrid Bootstrap You’ll need to switch to the manual bootstrap and delegate the startup code do ngUpgrade’s UpgradeAdapter: Remove your old Angular 1 bootstrapping code. In the main Angular 2 NgModule: Import the UpgradeAdapter import { UpgradeAdapter } from '@angular/upgrade'; Create a single instance of the adapter const adapter = new UpgradeAdapter(forwardRef(() => AppModule)); Bootstrap the application through the adapter adapter.bootstrap(document.body, ["app"], { strictDi: true });
  • 39. Downgrade Angular 2 Components and Services In the main NgModule file: Downgrade a Component angular.module('app').directive('ng2HeartbeatView', adapter.downgradeNg2Component(HeartbeatView)); Downgrade a Service angular.module('app').service('ng2LogService', adapter.downgradeNg2Provider(LogsService));
  • 40. Upgrade ng1 directives and services In the main NgModule file: Upgrade a Directive (in the NgModule declaration list) @NgModule({ declarations: [ adapter.upgradeNg1Component("sidMonitoringHeartbeats") ] }) Upgrade a Service (not in the NgModule providers list, it will be included in the root injector anyway) adapter.upgradeNg1Provider('logsService');
  • 41. Migrate Service ng1 -> ng2 Angular 1 Angular 2 Service registration replaced by @Injectable() decorator. The service class need to be registered in the providers list of the root module.
  • 42. Migrate Service ng1 -> ng2 Angular 1 Angular 2 Injection is made via constructor parameters and Type tokens. Optionally using the @Inject(<name>) attribute.
  • 43. Migrate Service ng1 -> ng2 Angular 1 Angular 2 Fight with the API changes.
  • 44. Migrate directive ng1 -> ng2 The directive declaration is replaced by the @Component() decorator. The Component class need to be added to the declarations list of the NgModule Angular 1 Angular 2
  • 45. Migrate directive ng1 -> ng2 Angular 1 Angular 2 Injection is made via constructor parameters. Optionally using the @Inject(<name>) attribute.
  • 46. Migrate directive ng1 -> ng2 Angular 1 Angular 2 Initialization and cleanup code go in the lifecycle hooks. With angular 1.5.x you have almost the same lifecycle hooks for the component api, migration would have been even easier!
  • 47. Filters: rewrite as Pipes You cannot Upgrade or Downgrade them: live with the duplicated code.
  • 48. The Last Step: Routing, Bootstrap & Clean-up Let’s suppose you have migrated all your directives to components… The Router (and the application template) will be the last thing to be replaced! Now you can get rid of the UpgradeAdapter and switch to the native Angular 2 bootstrap. Finally you can wave goodbye to all the Angular 1 dependencies and libraries!
  • 49. … and here we are, on the path to the Holy Grail! Alessandro Giorgetti SID s.r.l. member of: DotNetMarche / DevMarche Facebook: https://www.facebook.com/giorgetti.alessandro Twitter: @a_giorgetti LinkedIn: https://it.linkedin.com/in/giorgettialessandro E-mail: alessandro.giorgetti@live.com Blog: www.primordialcode.com