Code migration from Angular 1.x to Angular 2.0

Code migration from Angular 1.x to Angular 2.0

• 1.
  From 1.x to2.0 Ran Wahle
• 2.
  Agenda  A littleabout 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 aboutmyself  Full-stack developer  Enthusiastic front-end developer  Poor UI designer  Participated in writing Developing an Angular 2 Edge
• 4.
  A little aboutAngular 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 aboutrc-5  NgModule decorator  AoT Compilation
• 6.
  What is ourgoal?  Gradually migrate Angular 1.x application  During the process, enjoy Angular 2.0 capabilities in our Angular 1.x application
• 7.
  What do weneed?  Prepare our application  Blend Angular 2.0 in  Gradually upgrade
• 8.
  A little chatapplication 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 wedone already  Used controllerAs syntax  No function or field is declared directly on the scope
• 10.
  Restructuring modules  Everycontroller / 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 withAMD  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.5component  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  Itis 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.0into 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  Addthe @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 havestarted 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 ran.wahle@gmail.clm @ranwahle Blog:https://blogs.microsoft.co.il/ranw