Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. §...
Transcript of Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. §...
![Page 1: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/1.jpg)
Angular2UpgradeWebinarTravisRogers,JenWagler,Eyitayo Oredola - Feb2017
![Page 2: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/2.jpg)
CompanySummary
§ PrivatelyheldITservicesfirmspecializinginDataManagement/BigData/AnalyticsandFullLifecycleApplicationDevelopmentConsultingServices
§ 150+IntersysconsultantsdeliveringITsolutionsacrosstheUS§ OfficeLocationsinAustin,Phoenix,andNYC§ OffshoredevelopmentcenterinKochi,India§ ProvidingservicesacrossthefullITspace§ Leveragealocal,nationaland/orglobalmodelasappropriateforeachcustomerandengagement
©IntersysConsulting– Intersys&ClientConfidential2
§ MediaandAdvertising§ RetailandHospitality§ FinancialServices§ Healthcare§ HighTechManufacturing
Overview
KeyIndustries CoreValues Recognition§ BeAccountable§ BringExcellence§ BeAuthentic§ BeinServicetoOthers
![Page 3: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/3.jpg)
©IntersysConsulting– Intersys&ClientConfidential3
![Page 4: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/4.jpg)
TechnologyStaffing
CorePracticeCapabilities
©IntersysConsulting– Intersys&ClientConfidential4
BigData &Analytics
EnterpriseSearch
BusinessIntelligence
Analytics/DataScience
ApplicationServices
AssessmentQualityAssurance
Project&ProgramManagementStrategy&Roadmap
InformationManagement
BigData
Front-endEngineering
AgileTransformation
CustomDevelopment
CloudandMobility
DevOps Cloud
QualityAssurance
PackagedSolutions
ProjectManagement
Infrastructure
![Page 5: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/5.jpg)
Agenda• Introduction
• Overview
• KeyBenefitsofUpgradingtoAngular2+
• WhatarethedifferentmigrationpathsfromAngularJS1.xtoAngular2+
• Whataretheprosandconstoconsiderforeachmigrationpath
• Whattoolsthereareavailabletohelpwiththemigrationprocess
• ClosingandQ&A
![Page 6: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/6.jpg)
WhatarethebenefitsofupgradingfromAngularJS1.xtoAngular2.0
![Page 7: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/7.jpg)
KeyBenefits
§ModernArchitecture§ Components§ ObservablesRxJS§ TypeScript
§RenderApplicationLogicSeparation§ Angular2ArchitectureChanges
§CrossPlatformDevelopment§ NativeScript,IonicFramework,Electron,ReactNative
§AngularCLI§ Speed&Performance
§ CodeSplitting,AOT,UniversalInitialLoad
![Page 8: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/8.jpg)
Components
©IntersysConsulting– Intersys&ClientConfidential8
§ComponentClass §ComponentFileStructure
GonearethedaysofactuallycreatingHTMLstructuresand“pages”(what’rethose?).Thewebisbecoming“allaboutcomponents”,andthosecomponentsarecompletelyuptousthankstoWebComponents.ToddMotto,2014.
![Page 9: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/9.jpg)
Component– Input/Output
©IntersysConsulting– Intersys&ClientConfidential9
• Inputsyntax@Input()
• Outputsyntax@OutputwithusingtheEventEmitterclass
§ Input/Output Example
![Page 10: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/10.jpg)
ComponentLifeCycle
©IntersysConsulting– Intersys&ClientConfidential10
§CommonLifeCyclehooksUseDoCheck lifecyclehooktodetectchangesthatAngulardoesn’tcatch
![Page 11: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/11.jpg)
ComponentMarkup§ In-line
©IntersysConsulting– Intersys&ClientConfidential11
§ExternalFile
Style’sdefinedbycomponentscanbeisolatedfromglobalstyleseliminatedconflicts.
![Page 12: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/12.jpg)
ReactiveProgrammingwithRxJS
Angular2usesinRxJSobservablesintwodifferentways§ Forinternalimplementationforitscorelogic§ InitspublicAPIwithFormsandHTTPModel
Angular2Developerscanmakeuseofthereactiveprogrammingintheircode.
Youcanstillusepromisesifyoulike
©IntersysConsulting– Intersys&ClientConfidential12
![Page 13: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/13.jpg)
Observables§RxJSisusedforHTTPRequests
©IntersysConsulting– Intersys&ClientConfidential13
Service Component
![Page 14: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/14.jpg)
Observablesvs.Promises
§Observablescandefineboththesetupandteardownaspectsofasynchronousbehavior.
§Observablesarecancellable.§ObservablescanberetriedusingoneoftheretryoperatorsprovidedbytheAPI,suchasretryandretryWhen.Promisesrequirethecallertohaveaccesstotheoriginalfunctionthatreturnedthepromiseinordertohavearetrycapability.
©IntersysConsulting– Intersys&ClientConfidential14
![Page 15: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/15.jpg)
TypeScript
§ClassandModuleSupport§StaticType-checking§ES6FeatureSupport§WellDocumentedandSupported§SyntaxSimilaritytoBackendLanguages(.Net,Java)§SupersetofJavaScript
©IntersysConsulting– Intersys&ClientConfidential15
![Page 16: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/16.jpg)
RenderApplicationSeparation
©IntersysConsulting– Intersys&ClientConfidential16
§Angular2splitstheapplicationlogicfromtherenderlogic
ApplicationLogic
Renderer
![Page 17: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/17.jpg)
CrossPlatformDevelopmentWithAngular2’smoveawayfromDOMdependency,madecrossplatformdevelopmentmucheasier
©IntersysConsulting– Intersys&ClientConfidential17
![Page 18: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/18.jpg)
AngularCLI
©IntersysConsulting– Intersys&ClientConfidential18
TheAngularCLImakesAngulartasksavailablefromthecommand-line
• GeneratingaNewProject• GeneratingComponents,Directives,Pipes
andServices• GeneratingaRoute• CreatingaBuild• BuildTargetsandEnvironmentFiles• Basetaghandlinginindex.html• Bundling
• RunningUnitTests• RunningEnd-to-EndTests• ProxyToBackend• DeployingtheAppviaGitHubPages• Linting code• Commandsautocompletion• Projectassets• Globalstyles
![Page 19: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/19.jpg)
PerformanceEnhancements
©IntersysConsulting– Intersys&ClientConfidential19
CodeSplitting Ahead-of-TimeCompilation
UniversalInitialLoad
AngularappsloadquicklywiththenewComponentRouter,whichdeliversautomaticcode-splitting,sousersonlyloadcoderequiredtorendertheviewtheyrequest.
Ahead-of-timecompilationallowsforfasterrendering,fewerasynchronousrequests,andsmallerAngularframeworkdownloadsize.
Servethefirstviewofyourapplicationonnode.js,.NET,PHP,andotherserversfornear-instantrenderinginjustHTMLandCSS.Also,pavesthewayforsitesthatoptimizeforSEO.
![Page 20: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/20.jpg)
WhatarethemigrationpathsforthedifferentversionsofAngularJS1.x
![Page 21: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/21.jpg)
MigrationPaths
§MigrationOptionswhenUpgradingtoAngular§Options(pros/cons)
§ PathsforAngularJS1.xto2.x+§ DecidingwhichPath
§FutureofAngular
©IntersysConsulting– Intersys&ClientConfidential21
![Page 22: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/22.jpg)
MigrationOptions
©IntersysConsulting– Intersys&ClientConfidential22
Rebuildtheentire
Application
RebuildIncrementally
![Page 23: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/23.jpg)
RebuildIncrementally
§ Pros:§ NewfeaturescanbewritteninAngular2+§ Convertolderfeatureswhenneeded§ Nocodefreeze§ Previoustestscanconfirmrewritesuccess§ ngUpgrade Module
§ Cons:§ TimeIntensive§ HybridApplication§ Versions1.2/1.3/1.4shouldbeupgradedto1.5+
©IntersysConsulting– Intersys&ClientConfidential23
AddFeature
ConvertFeature
AddFeature
ConvertFeature
![Page 24: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/24.jpg)
RebuildwithAngular2+
§ Pros:§ Cleanconversion§ PureAngular2+application§ AngularCLI tool
§ Cons:§ Timeintensive§ Codefreeze§ Introducenewissues
©IntersysConsulting– Intersys&ClientConfidential24
![Page 25: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/25.jpg)
Upgradeto1.5+Rebuildin2.0+
UpgradefromAngularJS1.xto2.x+
©IntersysConsulting– Intersys&ClientConfidential25
1.x2.x+
![Page 26: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/26.jpg)
Decisions?
§Training§CurrentApplicationversion§SmallapplicationvsBigapplications§Folder Structure§HybridApplication§Testing§Application retirement§WWGD?
©IntersysConsulting– Intersys&ClientConfidential26
![Page 27: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/27.jpg)
JustAngular!
©IntersysConsulting– Intersys&ClientConfidential27
![Page 28: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/28.jpg)
SemanticVersioningSEMVAR
©IntersysConsulting– Intersys&ClientConfidential28
3.0.0••MajorVersionPotentialBreakingChanges
3.1.0••MinorVersionNoBreakingChanges
3.1.1••PatchorBugFixesNoBreakingChanges
![Page 29: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/29.jpg)
ReleaseSchedule
PatchVersioneveryWeek
MinorVersioneveryMonth
MajorVersionevery6Months
©IntersysConsulting– Intersys&ClientConfidential29
![Page 30: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/30.jpg)
PredictableandSteady
©IntersysConsulting– Intersys&ClientConfidential30
Major VersionRelease Timeframe
Angular4 March2017
Angular5 Sept/Oct2017
Angular6 March2018
Angular 7 Sept/Oct2018
![Page 31: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/31.jpg)
Whattools thereareavailabletohelp withthemigrationprocess
![Page 32: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/32.jpg)
MigrationandTools
§MigrationOptions§ BeforeAngular2
§ Tools§ ngForward§ ngMetadata
§ AfterAngular2§ Options
§ Versions1.2+§ Versions1.5+
§ Tools§ ngUpgrade
![Page 33: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/33.jpg)
Migration:BeforeAngular2
©IntersysConsulting– Intersys&ClientConfidential33
1.3
1.5+
1.4
![Page 34: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/34.jpg)
ngForwardOpensourceprojectthatpreparesyourAngular1codetolooklikeAngular2
§ Pros:§ Quick§ GetusedtoAngular2syntax§ BestusedifnotgoingtoupdatetoAngular2anytimesoon§ AddsSystemJSconfigurationtoyourproject
§ Cons:§ Notacompleteupgradesolution§ Nolongerunderactivedevelopment§ 1.3versionsandabove§ NoES5support§ Applicationcangetbulky§ UpgradingtoAngular2couldbeconfusingbecauseofsimilarsyntax
©IntersysConsulting– Intersys&ClientConfidential34
![Page 35: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/35.jpg)
ngMetadataOpensourceprojectcreatedbeforethereleaseofAngular2 toprepareto upgrade
§ Pros:§ UpdatescodebasetoTypescript/ES2015§ PureAngular1API§ SupportsAngular1APIandmostofAngular2§ CanbeusedwithngUpgrade§ ngParty Slackchannel
§ Cons:§ Notacompleteupgradesolution§ Angular1.4+§ MixtureofAngular1.xand2§ NotallAngular2supported
©IntersysConsulting– Intersys&ClientConfidential35
![Page 36: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/36.jpg)
Migration:AfterAngular2
©IntersysConsulting– Intersys&ClientConfidential36
UpgradetoAngular1.5+,thento2.0usingngUpgrade
§ Pros:§ 1.5+ syntaxissimilarto2.0§ Finalupgradeto2.0iseasier
§ Cons:§ Notacompleteupgradesolution
1.2+1.5+
2.0
![Page 37: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/37.jpg)
ngUpgradeCreatedbytheAngularteamaspartofAngular2toprovideanupgradepath.RunactualAngular2codealongsideAngularJS1.
§ Pros:§ OfficialpartofthemigrationpathbundledwithAngular2§ Comprehensivedocumentation§ Incrementalupgrade§ WorkswithES5andES6
§ Cons:§ Timeintensive§ MixtureofAngular1.xand2§ EasiestwhenusedwithAngularJS1.5+§ Onlyacompleteupgradeto2.0whenallAngular1codeisconverted
©IntersysConsulting– Intersys&ClientConfidential37
![Page 38: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/38.jpg)
ngUpgrade:Index.html
Angular1.5index.html
©IntersysConsulting– Intersys&ClientConfidential38
HybridAngular2index.html
Index.html
Useofng-appandscripttagsAdditionofAngularpolyfills,SystemJS configandSystem.import toloadapplication.
![Page 39: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/39.jpg)
ngUpgrade:ApplicationBootstrap
©IntersysConsulting– Intersys&ClientConfidential39
• Remove ng-appattributefrom
index.html
• Bootstrapisviamain.ts whichhas
beenconfiguredastheentrypointin
systemjs.config.js
• Appisbootstrappedusingthe
UpgradeModule
HybridAppmain.ts (entrypoint)
![Page 40: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/40.jpg)
ngUpgrade:Modules
Angular1.5Module
©IntersysConsulting– Intersys&ClientConfidential40
HybridAngular2Module
In Angular 1.5, assets are added to modulesIn Angular 2, classes are created and adorned with the NgModule decorator.
Modules:Differentconcepts
![Page 41: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/41.jpg)
ngUpgrade:Components
Angular1.5ComponentController
©IntersysConsulting– Intersys&ClientConfidential41
HybridAngular2Component
Component:ControllersinAngular1.5becomeClassesinAngular2
![Page 42: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/42.jpg)
ngUpgrade:Services
©IntersysConsulting– Intersys&ClientConfidential42
Services
• UsesngResource
• CanbeFactoryorService
• ServicesareusedinAngular2
• NgResourceisreplacedwithTypescriptclassanddecorated
with@Injectable
![Page 43: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/43.jpg)
WhyUpgrade?
§Speed&Performance§ModernArchitecture§DOMSeparation&Server-SideRendering§Mobiledevelopmentsupport
©IntersysConsulting– Intersys&ClientConfidential43
![Page 44: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/44.jpg)
HowtoUpgrade
©IntersysConsulting– Intersys&ClientConfidential44
1.x
1.3
ngForward
Formorecomplexorlargerapplications:
Forsmallerornewerapplications:
1.4
ngMetaData
refactor/rewrite
1.5 ngUpgrade
![Page 45: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/45.jpg)
Conclusion
©IntersysConsulting– Intersys&ClientConfidential45
![Page 46: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/46.jpg)
QuestionandAnswers
![Page 47: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/47.jpg)
References
![Page 48: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/48.jpg)
KeyBenefitsReferences§ ModernArchitecture
§ Components§ https://toddmotto.com/web-components-concepts-shadow-dom-imports-templates-custom-elements/§ https://angular.io/docs/ts/latest/guide/server-communication.html
§ ObservablesRxJS§ https://gist.github.com/staltz/868e7e9bc2a7b8c1f754§ https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87#.uu5lrkgha§ http://stackoverflow.com/questions/38008334/angular2-rxjs-when-should-i-unsubscribe-from-subscription
§ TypeScript§ https://blog.appdynamics.com/engineering/the-benefits-of-migrating-from-javascript-to-typescript/
§ RenderApplicationLogicSeparation§ https://docs.google.com/document/d/1M9FmT05Q6qpsjgvH1XvCm840yn2eWEg0PMskSQz7k4E/edit#§ http://blog.angular-university.io/angular-2-universal-meet-the-internet-of-the-future-seo-friendly-single-page-web-apps/
§ CrossPlatformDevelopment§ NativeScript - https://docs.nativescript.org/tutorial/ng-chapter-0§ IonicFramework- http://blog.ionic.io/angular-2-ionic/§ Electron- http://electron.atom.io/
§ AngularCLI- https://github.com/angular/angular-cli§ Speed&Performance
§ AOT- https://angular.io/docs/ts/latest/cookbook/aot-compiler.html§ https://angular.io/features.html
©IntersysConsulting– Intersys&ClientConfidential48
![Page 49: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/49.jpg)
MigrationPathsReferences§ Angular1.xtoAngular2
§ TypeScript:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview§ FolderandFileStructure:https://angular.io/styleguide§ JohnPapaStyleGuide:https://angular.io/docs/ts/latest/guide/style-guide.html
§ MigrationOptions:https://angular.io/docs/ts/latest/guide/upgrade.html§ http://www.gistia.com/upgradingtoangular2/
§ UpgradingtoAngular2§ https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html§ Angular1.xto2.0:https://scotch.io/tutorials/seamless-ways-to-upgrade-angular-1-x-to-angular-2
§ Angular1.5+to2.0:https://angular.io/docs/ts/latest/guide/upgrade.html§ Angular1.5vs2.0:http://www.infoworld.com/article/3031266/javascript/angular-150-paves-the-way-for-angular-2.html
§ VersioningpathforAngular3andbeyond§ http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html
§ http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html§ http://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html#Its_just_Angular_39
©IntersysConsulting– Intersys&ClientConfidential49
![Page 50: Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. § Pros: § Official part of the migration path bundled with Angular 2 § Comprehensive](https://reader035.fdocuments.in/reader035/viewer/2022070710/5ec6c1e7a89cc52f307c64cc/html5/thumbnails/50.jpg)
MigrationToolsReferences
§ MigrationOptions§ BeforeAngular2
§ Tools§ ngForward
§ https://github.com/ngUpgraders/ng-forward§ ngMetadata
§ https://github.com/ngParty/ng-metadata§ AfterAngular2
§ Options§ Versions1.2+
§ Versions1.5+§ https://angular.io/docs/ts/latest/guide/upgrade.html
§ Tools§ ngUpgrade
§ http://angularjs.blogspot.com/2015/08/angular-1-and-angular-2-coexistence.html§ https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-component-directives§ https://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html
©IntersysConsulting– Intersys&ClientConfidential50