Upgrading to Angular 2 using ngUpgrade

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