If you are here, you are probably as excited as us about Angular 2+ and it’s performance boost with new feature like Ahead of Time compile, OnPush and Lazy Loading…
… but you still have this legacy AngularJS code that you love (or hate) so much and you have to migrate to Angular 2+.
We talked a bit about the migration process on our last post and we are preparing another detailed blog post about that.
Meanwhile you get all set up for the migration you can still boost up your AngularJS app as described in our post and by using our brand new module ng-steroids-change-detector.
So, how does this work?
It’s simply inspired by Angular 2+’s OnPush mode and the new change detector.
Suppose you have this big dynamic list of items you are displaying to the user and you don’t want to use one-time-binding everywhere as the user might edit any of these items.
Well, you’ll get into trouble as even if you only display 100 items, you’ll have a bunch of watchers for each item and that will kill your app’s performance.
What if we could disable all the watchers once it’s all set up and then only re-enable them temporarily for the items that have changed in order to apply the changes?
Well, that becomes easy with ng-steroids-change-detector as it will do that for you.
The only condition is to make your items immutable.
This means that every time an item gets modified, you’ll have to clone it in order to create a new object with a new reference.
We need that because ng-steroids-change-detector will only compare the new and old reference of each item instead of deep comparing the whole object.
Now suppose we have this component:
class UserPreviewComponent {
static CONFIG = {
bindings: {
user: '<'
},
controller: UserPreviewComponent,
template: `
<div>{{ $ctrl.user.firstName }}</div>
`
};
}
/* app.module.ts */
const appModule = angular.module('app', []);
appModule.component('wtUserPreview', UserPreviewComponent.CONFIG);
that we will be using like this:
<user-preview user="user" ng-repeat="user in $ctrl.userList"></user-preview>
By adding this code to your component’s constructor:
constructor($scope, ChangeDetector) {
/* This is for ng-annotate. */
'ngInject';
this._changeDetector = new ChangeDetector({scope: $scope});
}
all the watchers related to your component will be removed until there reference to the “user” input changes and then the component will be updated.
This means that you can have a dynamic list with thousands of items with 0 watchers. Ain’t that cool?
Here’s the full documentation and source code:
https://github.com/wishtack/wishtack-steroids/
Hoping to have boosted up your apps as we did for Wishtack.
ng-kisses!
Wishtack 