Sharing Top Content from the Angular-sphere.

Angular NgUpgrade With DowngradeModule

  • This means anything that causes a change detection cycle in Angular will also trigger change detection in AngularJS.
  • Introducing ngUpgrade with upgradeModule in an existing AngularJS application changes this behavior.
  • Since ngUpgrade bootstraps the application with zones, events like xhr, setInterval and setTimeout are patched to trigger change detection.
  • One of the features of downgradeModule is more separation between the change detection cycles of AngularJS and Angular.
  • /app/increment/increment’; import { IncrementService } from declare var angular: any; const bootstrapFn = (extraProviders: StaticProvider[]) => { const platformRef = return }; const downgradedModule = downgradeModule(bootstrapFn); angular.module(‘ng-upgrade’, [ ‘old-angularjs-app’, downgradedModule ]); downgradeComponent({component: TextEditor})); downgradeComponent({component: Increment})); angular.bootstrap(document, [‘ng-upgrade’]); – – The biggest difference is in the bootstrapping.

In this post I will take a look at the new downgradeModule in ngUpgrade.

In this post I will take a look at the new downgradeModule in ngUpgrade.

Some of you may already be familiar with ngUpgrade and upgradeModule.

UpgradeModule works great, but we now have an alternative called downgradeModule.

The main difference between upgradeModule and downgradeModule is change detection management.

UpgradeModule runs AngularJS and Angular in the same Angular zone. This causes a tight coupling between change detection in AngularJS and Angular.

This means anything that causes a change detection cycle in Angular will also trigger change detection in AngularJS.

Examples of this are setInterval and setTimeout.

In regular AngularJS applications, setInterval and setTimeout won’t run a digest cycle unless you manually trigger it via scope.$digest or similar. Instead we would normally use $interval and $timeout if we need change detection in combination with timers.

Introducing ngUpgrade with upgradeModule in an existing AngularJS application changes this behavior.

Since ngUpgrade bootstraps the application with zones, events like xhr, setInterval and setTimeout are patched to trigger change detection. As a result we will trigger digest cycles where we previously didn’t.

In some cases this will be convenient since we no longer have to worry about wrappers like $interval and $timeout.

Angular NgUpgrade With DowngradeModule

Comments are closed, but trackbacks and pingbacks are open.