This document discusses migrating from AngularJS to Angular while maintaining support for legacy AngularJS code and routes. It covers using UI-Router for routing in a hybrid app, the ngUpgrade module for integrating Angular and AngularJS components, and a sample app that demonstrates how to migrate routes, components, and connect the two frameworks. Key steps in the migration include preparing the AngularJS app, configuring UI-Router, bootstrapping both frameworks, and using ngUpgrade to share components between the frameworks.

1. Migration from AngularJS
to Angular with UI-router

2. Aleks Zinevych
Front-end Tech Lead
at Datamart inc.
Speaker at
LvivJS conference,
various JS meetups
2https://goo.gl/kZovPa@a_zinewicz @aleksanderzinewicz

3. 3
AngularJS vs Angular
Migration
Demo
Pros and Cons
Agenda

4. http://www.iconsfind.com/wp-content/uploads/2013/11/Emoticons-Sad.ico 4
AngularJS

5. https://docs.angularjs.org/guide/databinding 5
Two-way data binding
Model
View

6. https://larseidnes.com/2014/11/05/angularjs-the-bad-parts/ 6
Problems
Good for small projects
Bad for big projects

7. 7
Universal apps
Server-side
JS
Client-side
JS
Shared JS

8. 8
Server-side rendering
ng1-server
PhantomJS
jsDom
http://www.iconsfind.com/wp-content/uploads/2013/11/Emoticons-Sad.ico

9. https://thesensitivegut.files.wordpress.com/2017/03/complexitymonster_cropped_web-01.png 9
Hard to learn

10. https://openclipart.org/download/238687/Boy-asking-question.svg 10

11. https://cdn.worldvectorlogo.com/logos/angular-3.svg 11

12. 12
Changes
One-way data binding
Server-side rendering
Simplicity
Mobile-oriented
Refactored core

13. https://gaboesquivel.com/slides/intro-to-angularjs/img/angularjs.jpg 13
VS.

14. https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/ 14
AngularJS vs. Angular

15. https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/ 15
AngularJS vs. Angular

16. 16
Migration

17. http://u-cart.ca/wp-content/uploads/2016/06/stepbystep.jpg 17

18. https://openclipart.org/download/238687/Boy-asking-question.svg 18

19. https://blog.nrwl.io/ngupgrade-in-depth-436a52298a00 19
ngUpgrade

20. https://blog.nrwl.io/ngupgrade-in-depth-436a52298a00 20
ngUpgrade
AngularJS Angular
Component 1
Component 2
Component 1
Component 2
Upgrade
Downgrade

21. 21
Inside Migration

22. 22
Project details
AngularJS 1.5
UI-router < 1.*
Gulp tasks
External dependencies

23. 23
How it worked before?
Url change
UI-Router
State Provider
/Route1
/Route2
/Route3
/Route4
…
Controller1 + View1
Controller2 + View2
Controller3 + View3
Controller4 + View4

24. 24
Preparation
AngularJS
Webpack
UI-router
Yarn
Angular
1.6.4 1.*
Gulp NPM

25. 25
How it’s working now?
Url Change
UI-Router
AngularJS State Provider
/Route1
/Route2
View1 + Controller1
View2 + Controller2
Angular State Provider
/Route3
/Route4
Component3
Component4

26. https://github.com/zinevych/angular-hybrid-sample 26
Sample App Details

27. https://github.com/zinevych/angular-hybrid-sample 27
Sample app structure
app
ng1Route
ng1MixedRoute
ng4Route

28. https://github.com/zinevych/angular-hybrid-sample 28
AngularJS routes
State config
AngularJS Component

29. https://github.com/zinevych/angular-hybrid-sample 29
Angular routes
State config
Angular Component

30. https://github.com/zinevych/angular-hybrid-sample 30
How it’s connected?
Angular Bootstrapping
AngularJS Bootstrapping
UI-Router init + Configuration

31. 31
How it’s connected?

32. 32
State object population
AngularJS Angular

33. https://github.com/zinevych/angular-hybrid-sample 33
AngularJS processing
Url Change
UI-Router
<ui-view />
AngularJS
Component

34. https://github.com/zinevych/angular-hybrid-sample 34
Angular processing
UIViewNgUpgrade

35. https://github.com/zinevych/angular-hybrid-sample 35
Angular Components processing
Url Change
UI-Router
<ui-view-ng-upgrade />
Downgrade
Angular
Component

36. https://github.com/zinevych/angular-hybrid-sample 36
Mixed component processing
UI-router config

37. AngularJS
https://github.com/zinevych/angular-hybrid-sample 37
Mixed component processing
Angular

38. https://github.com/zinevych/angular-hybrid-sample 38
Sample App Demo

39. 39
Summary

40. http://blog.softheme.com/wp-content/uploads/2015/06/fan_rewrite_code.png 40

41. 41
Cons
Speed of development
Performance
Dependencies
Bundle size

42. 42
Pros
Angular
Future-oriented
Mobile-oriented
Better Testability
Modern approaches

43. 43
Contacts
Email: aleksanderzinewicz@gmail.com
Facebook: aleks.zinevych
Twitter: @a_zinewicz
Medium: @aleksanderzinewicz

44. 44
Thank you!

45. 45
Questions?