Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Upgrading to Angular 2 using ngUpgrade

Upgrading to Angular 2 using ngUpgrade

911466eedb687b909f7e66816223ceb2?s=128

Matt Steele

April 26, 2016
Tweet

Transcript

  1. Upgrading to Angular 2 @mattdsteele https://steele.blue

  2. Everything is terrible

  3. Everything is terrible Your App

  4. Upgrade Options

  5. Upgrade Options

  6. Upgrade Options Big Bang Rewrite

  7. Upgrade Options Big Bang Rewrite ngForward

  8. Upgrade Options Big Bang Rewrite ngForward ngUpgrade

  9. Upgrade Options Big Bang Rewrite ngForward ngUpgrade

  10. ngYourAppIsSaved

  11. Angular 2 Module

  12. Angular 2 Module import { UpgradeAdapter } from 'angular2/upgrade';

  13. Run In Parallel

  14. Component Interoperability

  15. Component Interoperability In Both Directions*

  16. What can be upgraded?

  17. Components & Services

  18. Angular 1 Components

  19. Angular 1 Components Must Be:

  20. Angular 1 Components restrict: 'E' Must Be:

  21. Angular 1 Components restrict: 'E' scope: {}, Must Be:

  22. Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, Must

    Be:
  23. Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, controllerAs,

    Must Be:
  24. Angular 1 Components restrict: 'E' scope: {}, bindToController: {}, controllerAs,

    template Must Be:
  25. Angular 1 Components Can Be:

  26. Angular 1 Components Can Be: transclude: true,

  27. Angular 1 Components Can Be: transclude: true, require

  28. Angular 1 Components Must Not Be: compile replace: true priority

    terminal
  29. .component()

  30. Angular 1 Services

  31. Angular 1 Services Pretty Straightforward

  32. Angular 2 Components

  33. Angular 2 Services

  34. Transclusion/Content Projection

  35. Transclusion/Content Projection

  36. Transclusion/Content Projection

  37. Component Tree

  38. Component Tree

  39. angular.io/docs/ts/latest/guide/upgrade.html

  40. Upgrade Strategy

  41. Stuff You Can Do Now

  42. Stuff You Can Do Now • Code in TypeScript/ES6

  43. Stuff You Can Do Now • Code in TypeScript/ES6 •

    Use a module loader
  44. Stuff You Can Do Now • Code in TypeScript/ES6 •

    Use a module loader • Convert factories/services/providers to Services (ES6 Classes)
  45. Stuff You Can Do Now • Code in TypeScript/ES6 •

    Use a module loader • Convert factories/services/providers to Services (ES6 Classes) • Convert Directives to Components
  46. Upgrade Time

  47. Upgrade Time • Launch as hybrid app (UpgradeAdapter)

  48. Upgrade Time • Launch as hybrid app (UpgradeAdapter) • Migrate

    components
  49. In The Future

  50. In The Future Drop ng1

  51. In The Future Drop ng1 Bask in glory

  52. Let's Upgrade Something

  53. Super Bowl Squares http://www.zpoolz.com/main/Poolz_Football/2015/2016sbs5.jpg

  54. Services Datasets Data

  55. square-cell Components superbowl-header superbowl-squares square-cell square-cell

  56. square-cell Components + Services superbowl-header superbowl-squares square-cell square-cell Datasets Data

  57. square-cell Angular 1 Components superbowl-header superbowl-squares square-cell square-cell Datasets Data

  58. square-cell 1. Boot with UpgradeAdapter superbowl-header superbowl-squares square-cell square-cell Datasets

    Data UpgradeAdapter
  59. square-cell 2. Services superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter

  60. square-cell 3. Add Top Level App superbowl-header superbowl-squares square-cell square-cell

    Datasets Data UpgradeAdapter superbowl-app
  61. square-cell 4. Header Component superbowl-header superbowl-squares square-cell square-cell Datasets Data

    UpgradeAdapter superbowl-app
  62. square-cell 5. App superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter

    superbowl-app
  63. square-cell 6. Cells superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter

    superbowl-app
  64. square-cell 7. Squares superbowl-header superbowl-squares square-cell square-cell Datasets Data UpgradeAdapter

    superbowl-app
  65. square-cell 8. Bootstrap with ng2 superbowl-header superbowl-squares square-cell square-cell Datasets

    Data superbowl-app
  66. Gotchas

  67. Testing

  68. Testing • Testing w/o Angular? Easy

  69. Testing • Testing w/o Angular? Easy • Good recipes for

    ng2 tests
 https://medium.com/google-developer-experts/angular-2-unit- testing-with-jasmine-defe20421584#.pevppwgy2
 https://speakerdeck.com/cironunes/unit-testing-in-angular-2
  70. End To End Tests

  71. Testing Hybrid Components superbowl-squares Datasets Data http://stackoverflow.com/questions/36827715/testing-an-angular-app-with- ngupgrade-fails-with-unknown-provider-ng2-injector

  72. Testing Hybrid Components https://github.com/mattdsteele/football-squares/commit/ 77c1d42d4ef5e1546f1de46efa56db4caff232f7 superbowl-header superbowl-squares Datasets Data superbowl-app

  73. Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns

    track by $index"> <square-cell score-data="$ctrl.data" stats="$ctrl.stats" home="$ctrl.rows[row]" away="$ctrl.columns[column]" always-visible="$ctrl.allNumbers"> </square-cell> </td>
  74. Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns

    track by $index"> <square-cell [score-data]="$ctrl.data" [stats]="$ctrl.stats" [home]="$ctrl.rows[row]" [away]="$ctrl.columns[column]" [always-visible]="$ctrl.allNumbers"> </square-cell> </td>
  75. Template Syntax square-cell superbowl-squares square-cell square-cell <td ng-repeat="column in columns

    track by $index"> <square-cell [scoreData]="data" [stats]="stats" [home]="rows[row]" [away]="columns[column]" [alwaysVisible]="allNumbers"> </square-cell> </td>
  76. Bookmark These Sites • http://angularjs.blogspot.com/2015/08/angular-1-and-angular-2-coexistence.html • https://angular.io/docs/ts/latest/guide/upgrade.html • http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html •

    http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
  77. /mattdsteele/football-squares @mattdsteele https://steele.blue

  78. Routing • Component Router • UI Router • http://slides.com/christhielen/ui-router-ng1-to-ng2 •

    https://youtu.be/mnkG-RRkZtU