i 've been playing around with AngularJS 1.x and Angular 2, trying to compare their performance.
Here is a Plunkr showing a 'down-side' with Angular 1.x. If too many elements are present on the scope, you will notice lags in rendering the input field as you edit it, since the framework will check all elements on the scope each time it detects an event that could have changed any.
Excerpt from the first Plunkr (html):
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input ng-model ="name"></input>
Hello, {{name}}!
<button ng-click="generateFields()">
Generate 5000 elements
</button>
{{list}}
</div>
Excerpt from the first Plunkr (js):
myApp.controller('myCtrl', function($scope) {
$scope.name = 'name';
$scope.list = [];
$scope.generateFields = function(){
for(i=0; i<5000;i++){
$scope.list.push(i);
}
}
});
In this Plunkr, i 've written a similar sample in Angular 2. It seems that there is no lag at all. How is this resolved in Angular 2? Does the framework somehow knows that only the input field is changed, or is it just faster in performing dirty checking because of the VM optimized change detectors?
Excerpt from the second Plunkr:
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div>{{myProp}}</div>
<input [(ngModel)]="myProp" />
<button (click)="generateFields()">Generate</button>
<div>{{myList}}</div>
</div>
`,
directives: []
})
export class App {
constructor() {
}
myProp :string = "Change me!";
myList :any = [];
generateFields(){
for (var i = 1; i < 5000; i++)
{
this.myList.push(i);
}
console.log("fields generated");
}
}
