Migration from AngularJS to Angular
Download as PPTX, PDF2 likes1,626 views
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.
Migration from AngularJS to Angular
- 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
- 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
- 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.
- 16. 16 Migration
- 20. https://blog.nrwl.io/ngupgrade-in-depth-436a52298a00 20 ngUpgrade AngularJS Angular Component 1 Component 2 Component 1 Component 2 Upgrade Downgrade
- 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
- 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
- 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
- 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
- 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
- 39. 39 Summary
- 40. http://blog.softheme.com/wp-content/uploads/2015/06/fan_rewrite_code.png 40
- 43. 43 Contacts Email: [email protected] Facebook: aleks.zinevych Twitter: @a_zinewicz Medium: @aleksanderzinewicz
- 44. 44 Thank you!
- 45. 45 Questions?
Editor's Notes
- #3: Починав як дот нет розробник далі груві рубі нода + джс на фронтенді
- #4: Поговоримо про енгюлар джіес якій його проблеми і що вирішує якраз новий ангуляр
- #5: Хто не любить ангуляр? Давайте поговоримо про проблеми
- #6: Коли ми говоримо про ангуляр то відразу в нас все асоціюється з дейта біндінгом
- #7: Хороший для малих проектів поганий для великих
- #8: Сьогодні дуже популярними стали юніверсал апи
- #10: React comparison
- #11: Як ми знаємо новий англуяр це абсолютно новий фремворк повністю переписнай… так давайте подумаємо чи переписували б вони якби з ним все було ок --- ні, але вони переписали
- #12: Поговоримо про новий англуяр, внести ясність з неймінгом
- #14: Щоб не бути голослівним ось бенчмаркінги
- #27: Семпл апплікейшин з прикладом того як ми це реалізовували в нашому проекті, зараз я би хотів розповісти про нього трохи детальніше, після чого перейдемо до демострації