Angular $templateCache in an Ionic app, useful?

ionic-v1
1

Hi, I’ve been creating a “gulp file” (gulp.js) to perform builds optimized for production (i.e. with minification/uglification of css/javascript and so on, and ng-annotate for dependency injection with “strict-di”).

I found dozens of people who’ve blogged about this and reinvented their own wheel but the one I’ve used is this excellent post: Ionic app dev with gulp minify compress etc

Now my question is: in that post (and in many others) I see most people define a gulp task to implement “angular template cache”:

https://docs.angularjs.org/api/ng/service/$templateCache
https://www.npmjs.com/package/gulp-angular-templatecache

I’ve not added this to my “gulp.js” because I wonder if this is useful at all for an Ionic app, because Ionic has its own view caching mechanism.

Is there anyone who would know if adding angular-template-cache would be beneficial for performance of an Ionic app?

(by the way, I do have dozens of separate template/html files in my app so I can imagine that in my case it could be more beneficial)

2

It is! So the template cache is actually different than Ionic’s template caching.

As you’ve probably read, no matter where the template file is located (remote or local) the browser still does a full http request to retrieve it. To cut down on this time if you can concat all of your templates and have angular load them on run it makes it so that if their phone is slower, or there is a delay in the template loading, there won’t be any white flashes. I only really had an issue once with this way back in some of the early betas, but I haven’t been testing on lower end devices for a while.

It’s also good to clean up some space if it can compress them too, especially in larger apps.

The ionic cache is more of a current view cache. So as you visit views those scopes and data get saved and retrieved instead of re-initializing them again. Same principle, different data.

3

Okay thanks, that’s very useful. I think I’ll add it to my build process then.
It doesn’t hurt and it’s easy to automate with gulp.

One thing, you say the browser (the webview that is, I suppose) does an http request.

Is that true even under Cordova on a device, doesn’t it then simply read a local file rather than do http?

4

It’s still an http request, believe it or not haha.

In low latency situations like cordova, there’s hardly an impact, however I run a software set that is in the middle of no where and the internet is horrible, so by combining all the angular templates into one and then cache them, I save the request from being started for every template.

It does this for javascript files as well, so if you have 100 different javascript files it has to make an http request via the browser for each one of those.

Something we normally don’t have to think about this day of age, thankfully

5

Okay thanks! And it’s very easy to automate with gulp so there isn’t any reason why you wouldn’t.

I added it to my project gulp yesterday and it was super simple.

Didn’t notice anything (in terms of speed) when running it on my device (Galaxy S III Neo with Android 4.4.2) but I didn’t expect that either (not the newest phone but it’s fast enough even without Crosswalk).

I’ll give it a shot on my iPhone 4 and Galaxy tab too, see if it makes a difference there.

1 Like
6

How did you link the file that the plugin produces? I tried to add mine in my index.html page as “…/public/templates.js”, but it can’t seem to find it. I also added the “templates” module to the main app dependencies. Did you do anything else to get it working?

7

Well I made a full working app that you can look at:

https://github.com/leob/ionic-quickstarter

Apart from the template cache it contains some other useful stuff, it’s all explained in the README.