Migrating AngularJS to Angular 4,5 (with DEMO)

javascript angularjs angular ng-upgrade angular-hybrid
user7776690 picture user7776690 · Jun 1, 2017 · Viewed 13.1k times · Source

I am looking into ways of migration a current Angular 1 project to Angular 4.

Options are ng-forward, ngUpgrade or rewrite.

I am thinking on rewriting it but with a twist.

  • I keep the current application
  • Start writing the new one parallel to it
  • All new NG4 rewrites, I want to use ... so bit by bit in other words.

Has anyone attempted this or know a better way?

Answer

georgeawg picture georgeawg · Jun 1, 2017

Incrementally upgrade an AngularJS application to Angular.

One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless.

For more information, see Angular Developer Guide - Upgrading from AngularJS

The DEMO on PLNKR

Related questions

Inject angularjs service into Angular

I'm trying to use $log service into an angular 2, According to what I read you need the following steps: Create a module that contains the service you want to inject. Call UpgradeAdapter's upgradeNg1Provider method. So, I did the following …

Read More
Angular 2: Callback when ngFor has finished

In Angular 1 I have written a custom directive ("repeater-ready") to use with ng-repeat to invoke a callback method when the iteration has been completed: if ($scope.$last === true) { $timeout(() => { $scope.$parent.$parent.$eval(someCallbackMethod); }); } Usage in markup: <li …

Read More
How to Unit Test a Directive In Angular 2?

Problem: I would like to be able to unit test a directive in Angular 2 to make sure that it properly compiles. In Angular 1, it was possible to use$compile(angular.element(myElement) service and call $scope.$digest() after that. I …

Read More