Angular render template and store it to local

Question

I have a template (partial) that I use in few parts of my app problem is rendering this template takes a bit 1-3 seconds. I optimized the rendering process as much as I could but it's still a bit slow.

My template:

<div ng-repeat="row in rows track by $index">
  <div ng-repeat="col in row track by $index">
    <div class="column" ng-click="checkColumn($parent.$index, $index, col)">
      <img ng-src="..." ng-if="col.checked" />
      <img ng-src="..." ng-if="col.reserved" />
      <img ng-src="..." ng-if="col.used" />
      <img ng-src="..." ng-if="col.locked" />

      <img ng-src="..." ng-if="col.private" />
      <img ng-src="..." ng-if="col.disabled" />
      <img ng-src="..." ng-if="col.large" />
      <img ng-src="..." ng-if="col.small" />
    </div>
  </div>
</div>

On average there are 15 rows and each row usually has avg. 17 cols. So usually about 255 <div class="column"> get created.

My idea was to when the application is loading before visiting the screen where this is show to get rows from the API than pass them to this template have it render.

Than save rows and rendered template to local storage. Than in rest of my controllers where I need this I can just restore rows from local storage and inject template from local storage.

Just not sure exactly how I would go about this on AngularJS side.

A quick question: can a .column have more than one img displayed at once? If not, you could aggregate all the ngIfs into one img. — Cosmin Ababei
– Cosmin Ababei, Commented Jul 18, 2016 at 10:19
@CosminAbabei I always has only one image however the src for each image is different. — Sterling Duchess
– Sterling Duchess, Commented Jul 18, 2016 at 10:47
Hi, are you sure in using ng-if? Mostly, it's used when you need to re-init controller bind to directive etc. I suggest try using ng-show instead. This will speed up your second rendering (coz it will be not rendering but just showing hidden elements what is much faster) — Appeiron
– Appeiron, Commented Jul 18, 2016 at 11:08
@Appeiron The difference between ng-show and ng-if seems marginal.Very small I initially get ng-show the ng-if was a tiny tiny bit faster. — Sterling Duchess
– Sterling Duchess, Commented Jul 18, 2016 at 11:18
@SterlingDuchess I'm sure you can aggregate all the ngIfs inside ngSrc since it works with Angular expressions. This would give you a performance boost as you'll trim down the number on watchers. — Cosmin Ababei
– Cosmin Ababei, Commented Jul 18, 2016 at 11:35

Appeiron · Accepted Answer · 2016-07-18 13:53:29Z

In general - you are free to store templates as static HTML in LS, and don't worry about any Angular ng-click etc. As all your data will be treated as static HTML, any Angular attributes will be compiled and working.

I've made example how to do this via template, hope it will be answer for you.

HTML:

<div ng-app="app" id="app"> <cached-directive></cached-directive> </div>

JS:

var app = angular.module('app', []);
var data = [{a: 1}, {a: 2}, {a: 3}];

var cachedDirective = function ($compile) {
	var directiveCtrl = function () {
  	this.somevar = Date.now();
  }
  
  directiveCtrl.prototype.sayHi = function () {
  	alert(1);
  }
	
  var originTemplate_ = '<b>{{ctrl.somevar}} TEST </b><button ng-click="ctrl.sayHi()">HELLO</button>';
  
  return {
		template: localStorage.template || originTemplate_,
    controller: directiveCtrl,
    controllerAs: 'ctrl',
    link: function (scope, el, attrs) {
     setTimeout(function () {  
        localStorage.template = el.html();
     })
    }
  };
}

app.directive('cachedDirective', cachedDirective);

Try it at fiddle, I've provided in comments.

P.S. Don't forget to update your template in LS each time, something changed.

Collectives™ on Stack Overflow

Angular render template and store it to local

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related