AngularJS Performance: conditional inline classes/ng-if vs controller function; -


i have controller lots of conditional inline classes helps change style(e.g. game in progress , completed game has different font colors) , ng-if conditional representation (e.g display short name vs full name if team consist of 2 people) of elements depending on values of incoming data. example of ng-if:

<span ng-if="(isshortname && eventtype == 's')|| eventtype == 'd'" ng-bind="player.shortname"></span> <span ng-if="(!isshortname && eventtype == 's')" ng-bind="(player.firstname + ' ' + player.lastname)"></span> 

since same layout used multiple times (many events @ same time), created directive displays 1 event , ng-repeat apply directive multiple events incoming data.

this event directive have directives e.g display header of table.

the amount of incoming of data huge. many bindings noticing slowing in performance.

i wondering view of best practices , performance improvements:

1) better have function in controller check appropriate class apply elements vs inline conditional classes?

2) better have function in controller check appropriate name representation use , return ready string vs inline ng-if?

3) better remove nested directives reduce amount of binding end having redundant code across pages? thanks

what have detailed still not clear, can give generic advice can useful.

firstly in angular performance boils down number of binding on page , number of digest cycles run on time.

to reduce binding should @ directives bindonce (third-party) angular 1.2.x or :: symbol available in angular 1.3.x

bindonce , :: used setup once time data binding between model , view. useful data not going change after has been bound.

using ng-if instead of ng-show reduces bindings dom elements not added view , no binding setup.

also @ http://binarymuse.github.io/nginfinitescroll/ if rendering large list.

with respect reducing digest cycle @ article brian ford http://briantford.com/blog/huuuuuge-angular-apps, section on digest cycle.

last not make difference if binding expression function or inline expression, angular both expressions , evaluated against current scope.


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -