Downloaded 42 times
Uploaded byAleks Zinevych
Migration from AngularJS to Angular
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 toAngular with UI-router
- 2. Aleks Zinevych Front-end TechLead at Datamart inc. Speaker at LvivJS conference, various JS meetups 2https://goo.gl/kZovPa@a_zinewicz @aleksanderzinewicz
- 3. 3 AngularJS vs Angular Migration Demo Prosand Cons Agenda
- 4.
- 5. https://docs.angularjs.org/guide/databinding 5 Two-way databinding Model View
- 6. https://larseidnes.com/2014/11/05/angularjs-the-bad-parts/ 6 Problems Good forsmall projects Bad for big projects
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. 12 Changes One-way data binding Server-siderendering Simplicity Mobile-oriented Refactored core
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. https://blog.nrwl.io/ngupgrade-in-depth-436a52298a00 20 ngUpgrade AngularJS Angular Component1 Component 2 Component 1 Component 2 Upgrade Downgrade
- 21.
- 22. 22 Project details AngularJS 1.5 UI-router< 1.* Gulp tasks External dependencies
- 23. 23 How it workedbefore? Url change UI-Router State Provider /Route1 /Route2 /Route3 /Route4 … Controller1 + View1 Controller2 + View2 Controller3 + View3 Controller4 + View4
- 24.
- 25. 25 How it’s workingnow? Url Change UI-Router AngularJS State Provider /Route1 /Route2 View1 + Controller1 View2 + Controller2 Angular State Provider /Route3 /Route4 Component3 Component4
- 26.
- 27. https://github.com/zinevych/angular-hybrid-sample 27 Sample appstructure app ng1Route ng1MixedRoute ng4Route
- 28. https://github.com/zinevych/angular-hybrid-sample 28 AngularJS routes Stateconfig AngularJS Component
- 29. https://github.com/zinevych/angular-hybrid-sample 29 Angular routes Stateconfig Angular Component
- 30. https://github.com/zinevych/angular-hybrid-sample 30 How it’sconnected? Angular Bootstrapping AngularJS Bootstrapping UI-Router init + Configuration
- 31.
- 32.
- 33. https://github.com/zinevych/angular-hybrid-sample 33 AngularJS processing UrlChange UI-Router <ui-view /> AngularJS Component
- 34.
- 35. https://github.com/zinevych/angular-hybrid-sample 35 Angular Componentsprocessing Url Change UI-Router <ui-view-ng-upgrade /> Downgrade Angular Component
- 36. https://github.com/zinevych/angular-hybrid-sample 36 Mixed componentprocessing UI-router config
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. 43 Contacts Email: aleksanderzinewicz@gmail.com Facebook: aleks.zinevych Twitter:@a_zinewicz Medium: @aleksanderzinewicz
- 44.
- 45.
Editor's Notes
- #3 Починав як дот нет розробник далі груві рубі нода + джс на фронтенді
- #4 Поговоримо про енгюлар джіес якій його проблеми і що вирішує якраз новий ангуляр
- #5 Хто не любить ангуляр? Давайте поговоримо про проблеми
- #6 Коли ми говоримо про ангуляр то відразу в нас все асоціюється з дейта біндінгом
- #7 Хороший для малих проектів поганий для великих
- #8 Сьогодні дуже популярними стали юніверсал апи
- #10 React comparison
- #11 Як ми знаємо новий англуяр це абсолютно новий фремворк повністю переписнай… так давайте подумаємо чи переписували б вони якби з ним все було ок --- ні, але вони переписали
- #12 Поговоримо про новий англуяр, внести ясність з неймінгом
- #14 Щоб не бути голослівним ось бенчмаркінги
- #27 Семпл апплікейшин з прикладом того як ми це реалізовували в нашому проекті, зараз я би хотів розповісти про нього трохи детальніше, після чого перейдемо до демострації