If you are a developer or a person closely related to the development industry, you probably know about the release of Angular 7 in October 2018. Don’t confuse it with AngularJS since there is a conceptual difference between AngularJS and Angular versions 2,4,5,6 which lies in their architecture.
Thanks to continual improvements, Angular becomes faster and better solution for web projects than AngularJS. Advanced developers are always in search for new technologies, so it is even hard to find coders to work on Angular version 1.0 now. In general, Angular is better in almost all aspects comparing with its relative: speed, weight, convenience, number of bugs, etc. So it is high time to follow new prospective technologies.
With regard to AngularJS, it is past the point. It copes with affordable tasks well, but it doesn’t develop as a programming framework. At the same time, the business world experiences significant growth in client’s projects and requirements as time goes, so there is a chance that further advancement of AngularJS-based projects will be possible only in case of total platform redevelopment.
Of course, merging is not an easy task. Still, when and for what is it better to use Angular and migrate to it?
It is nothing new that Angular gets significant improvements with each new version. Comparing with earlier versions 1.x, a general structure of Angular-based applications has become much easier to understand. Developers are more focused on building classes (components) that replace “Views” and “Controllers” from earlier versions. This approach increases testability and maintainability of a written code base.
Another advantage is that the framework is written in Typescript (a typed superset of JavaScript). Runtime errors are substantially reduced since mistakes can be found before transpiling starts. Developers experienced in OOP such as C# may learn Angular faster as its syntax and approach are close to the ones used in OOP languages.
How to Migrate From Angularjs to Angular?
One of the cases is rebuilding AngularJS-based applications from scratch on Angular. Such rebuilding is a time-consuming task. So, further project development needs to be paused in order to put all efforts into migration to a new framework.
Another case is a hybrid mode when changes are done in real time on production with AngularJS and Angular working simultaneously. The proposed hybrid option allows reducing the time spent on refactoring big projects where all business logic is implemented on the frontend side. Migration helps to save around 95% of production code. Moreover, it makes possible to build and release new functionality along with upgrading existing features.
https://angular.io/guide/upgrade
What Should Be Done During Migration?
- Merge compilers. Note it may hurt the speed of performance, especially on big projects, as virtually components compile two times.
- Merge and connect AngularJS elements step by step. Some challenges may appear during this step depending on elements and architecture used on the project.
Upgrading with ngUpgrade
Angular library ngUpgrade is a helpful tool for the application upgrade. It allows developers to mix and connect Angular and AngularJS components so that they work seamlessly together. There is no need to upgrade all application at once as these two frameworks can coexist during the migration period.
How ngUpgrade Works
The UpgradeModule is one of the primary tools of ngUpgrade. It contains utilities for bootstrapping and managing hybrid applications built with both Angular and AngularJS.
The library helps to run both AngularJS and Angular simultaneously. In other words, all Angular code is running in the Angular framework and AngularJS code in the AngularJS framework. Both versions are fully featured and complete, so all functionality is expected to have the natural behavior of both frameworks.
When both frameworks used in one application, components and services managed by respective frameworks interoperate with each other in the three main areas, namely Dependency injection, the DOM, and change detection. The DOM of an ngUpgrade application contains components and directives of both applications. They connect and communicate with each other via input and output bindings provided by their native frameworks.
ngUpgrade.js
Angular 2 usually completes with the ngUpgrade.js library. Angular 2 may also be accompanied with this library inside AngularJS 1 application which allows both frameworks to be loaded simultaneously on the same page. To ensure a proper interrelation of different components, ng2interop is used in addition to the library.
Bootstrap
You should bootstrap each application part drove by Angular and AngularJS, in order to bootstrap an entire hybrid application: first the Angular bits and next AngularJS bits with the help of UpgradeModule. A root AngularJS module located inside the application will be also used to bootstrap AngularJS application until it will be fully converted to Angular 2. Once the conversion is finished, the module can be removed.
Adapters
ng2interop is used as an adapter for Angular 2 and AngularJS 1 components. The components can be adapted/wrapped into each other that allow interrelation of two frameworks. It may be managed in two ways:
- by using a component from the other framework and template from another (e.g. an Angular template using AngularJS component)
- by projecting content from the other framework. ngUpgrade bridges the related concepts of AngularJS transclusion and Angular content projection together.
DOM element ownership in a hybrid application
If you use the component of the other application, it causes switching between framework boundaries.
Upgrading and Downgrading
Upgrade of AngularJS services makes them available for injection to Angular code. Be sure that the same singleton instance of each service can be read by each framework. Such services are located in the Angular root injector and accessible for all components.
Another option is to downgrade Angular services in order to make them available for injection to AngularJS code. Remember, in this case only services from the Angular root injector can be downgraded. You must specify a string token that you are going to use in AngularJS while you register a downgraded service.
Use the tool named Custom elements made by Angular developers and provided in Angular 6. You can get more information about this feature from the video presentation by Rob Wormald, the developer of the Angular core team, from ng-conference in London, 2017.
Final Thoughts
In conclusion, hybrid migration to the newest Angular versions is not a force majeure procedure. Angular team put efforts to make this process more convenient and less painful for applications so that it becomes a new normal these days.