Today we would focus on improving the performance of Angular JS code by learning the basics of ng-repeat and then how to enhance its capabilities.
ng-repeat :-
It is directive which create instant of template for each item in the collection. It is identical to looping concept in any language say Java, for example we need to display all the items in an array we would use “ForEach item in items” in Java. Similarly we would say “ng-repeat = item in items” in Angular JS terms.
Note:- We have angular.forEach function available in AngularJs used for iteration.
Example:-
We need to display all the name-version pairs on the view.We would implement ng-repeat as we did in the following example…
Note:- By default, ngRepeat does not allow duplicate items in arrays. We can overcome this by defining our own track by expression.
Example below we have key = Angular is repeating twice but still in the output we are getting the one key-value pair.
How many watches does ng-repeat create for above example?
We knew that Angular creates a $watch for every single ng directive, so above list has 3 + 1 watches (3 names + 1 for ng-directive). Imagine if we have huge array of names how many watches would be created.
How to improve the performance of ng-repeat?
1. Using track by:-
Track by assist Angular in recognizing unique items. Now by default for every item that is getting displayed using ng-repeat, AngularJS calculates hash value to uniquely identify the object. To make sure that whether it has an object before or new object need to be created to display it.
Suppose we are fetching our name-version array in above example on frequent basis this means reference to objects displayed changes multiple times in ng-repeat. So it is recommended to tell AngularJS, how it can identify the unique items.
Our solution is track by.
ng-repeat = name in items track by name.id
This tells AngularJS that each name is uniquely identified by the name.id value, and to reuse DOM elements as long as the id field does not change.Thus we have used our own key for ng-repeat to identify the objects, instead of generating the unique ID’s each time.
Learning: – implement track by to get unique values
2.Using filters in controller rather than directly in HTML
Filter helps in limiting our data by giving data in user required form, for example we want our version above to have 2 decimal places at end so we can just change the code as
ng-repeat = “” | filter =limitto:2
But this becomes a headache and a performance issue incase we are filtering the data in the HTML. Better optimize the triggering of filer in our controller rather than implementing it directly in HTML.
Learning: – Limit DOM filters
3. One-time data binding {{::expression}}
It can be done by simply using the prefix “::”( double colon) before the angular expression.
It helps as AngularJS stops watching the variable and updating it in the UI. So resources are freed for watchlist thus improving the performance.
Remember this approach is useful for data that is not expected to change after displayed to the user.
Learning: – Implement bind-once approach if possible
Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.