This post is curated content to migrate large Angular 1 to Angular 2.
If minmum of 10k LoC sounds large to you, and has no time to rewrite the entire application, this blog may save you time. Along the way, we will see concepts introduced in Angular 2 rebranded Angular 4.x.
Table of content
- New Concepts
- ES6, ES7 and TypeScript
- Unit Testing
- One-way data binding
- Mobile Strategy
- Server Side Rendering
- Performance tuning
- Curated Content
Angular 2 offers flexibility, simplicity and better performance advantages over Angular 1.
Four things need to interoperate between Angular 1 and Angular 2 source:
- Dependency injection
- Angular 1: single root injector
- Angular 2: hierarchical injector
- "Upgrading services one at a time implies that the two injectors need to be able to provide instances from each other"
- Injector for NG 1 should be able to provide Service instance
- Injector for NG 2 should be able to provide Service instance
- "ng-upgrade library makes Angular 1 injectables available in Angular 2"
- Meaning: "Angular 1 application services can now be injected anywhere in Angular 2 components or services"
- Component nesting
- In both versions of Angular -> Component is a directive which has its own template
- "ng-upgrade allows to wrap Angular 1 components in a facade so that they can be used in an Angular 2 component"
- "Conversely, you can wrap Angular 2 components to be used in Angular 1"
- "This will fully work with transclusion in Angular 1 and its analog of content-projection in Angular 2"
- What becomes directives without templates?
- Change detection
- DDO (Directive Definition Object)
- $scope dependencies to be re-imagined
- Scrope message passing via: $scope.$on, $scope.$emit, $scope.broadcast
- $scope.$watch, $scope.$destroy, $scope.$apply
- Bidirectional binding
Migration from Angularjs 1 to Angular 2
- Angular 2 in Plain JS
- Angular 1 and Angular 2 integration: the path to seamless upgrade
- Seamless Ways to Upgrade Angular 1.x to Angular 2
- Upgrading apps to Angular 2 using ngUpgrade
- Migrating to AngularJS 2 - paislee
- The road to Angular 2
Tutorials to write Angular 2 applications
- one hungry mind
- Angular 2 First impression.
- Learn Angular 2 by the Ionic team
- Angular 2+ - A Getting Started Guide for Beginners
What is a Component
- "component is a loose term for a DOM element that has its own view, model, and behaviors"
- behaviours: ressembles controllers in AngularJS 1.
- No compile and link functions, Which makes Component not suitable for all things DOM manipulations(event listeners, etc)
Migration to Angular 2 - introduction
There are two mainstream ways to upgrade to Angular 2: Rewrite or Progressively.
- The obvious, dangerous, way is to rewrite the application in Angular 2. Sounds familiar?
- Progressively by using ng-update and hack everything to make backward compatible
- Progressively by identifying similarities in both frameworks, and write new code based on new code structure. new
- Understanding .component() method
- Using Component in Angular 1.5 as a transition to Angular 2
Where to start?
- Depending less and less on Everything Scope.
- Restyle Directives to make them look like Angular 2 Components
- Decouple code from angular.module
- Jump Tests first + Move all Controllers to Components and All directives to Components.
- Remove $watch from your codebase
- Surviving components change with
$watch-es StackOverflow QA
Migration to Angular 2 - Step by step
- Update to Angular 1.5.7
- Transition to Components
- Router (the starting point )
- Controllers + Controller Templates becomes Component (Router+View+Model+Implicit scope)
- Structure code in NG 1 in such a way it can used in NG 2
- NG 2 Router can be used with NG 1
- Can a directive be considered as a Component? YES
- Refactoring Angular Apps to Component style
- Guide: Route to Component
- Forms with ControllerAs notation
Writing Angular 2 in ES5
- Quickstart - angular.io
- Writting Angular Code in ES5
- How to do everything in Angular 2 using ES6
Targetting web, native mobile and desktop
Performance and memory leaks