Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Code migration from Angular 1.x to Angular 2.0


Published on

Front-end.IL session about making your AngularJs 1.x code ready for andular 2.0 and mirgating using the UpgradeAdapter module.

Published in: Software
  • Be the first to comment

Code migration from Angular 1.x to Angular 2.0

  1. 1. From 1.x to 2.0 Ran Wahle
  2. 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. 3. A little about myself  Full-stack developer  Enthusiastic front-end developer  Poor UI designer  Participated in writing Developing an Angular 2 Edge
  4. 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. 5. A little about rc-5  NgModule decorator  AoT Compilation
  6. 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. 7. What do we need?  Prepare our application  Blend Angular 2.0 in  Gradually upgrade
  8. 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 for chating  Needs to be migrated gradually (well, it did if it was big)
  9. 9. What have we done already  Used controllerAs syntax  No function or field is declared directly on the scope
  10. 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. 11. Load modules with AMD  Remove all script tags from the application’s HTML page  Declare JS dependencies directly in JS files
  12. 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. 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. 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. 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. 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. 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. 18. Thank you Ran Wahle ran.wahle@gmail.clm @ranwahle Blog: