Any way to load all tab views/scopes during splash? (tabs lag on first tap)

[jbalchun]

When you first visit my app on the web, or open it in cordova on device, there is some lag the first time you visit each tab before the view is cached. I was wondering if there is any way to cache all of these first, then let the user in.

Thanks!

[gmarziou]

Ionic views are cached by default so are you sure that lag is caused by views and not by fetching data or something else?

[jbalchun]

Maybe I’m confusing caching the view with initializing the scope for the controller? if you visit this link http://gaindeck.herokuapp.com/ on mobile(this is less noticeable on a pc or in cordova, but still there), and click the last tab (timer) after opening, you will see the start button flash, but if you leave and re-visit the tab, it doesn’t flash. This is something very subtle but I think ironing it out would give a far less ‘janky’ first impression.

I should add: The app doesn’t fetch any external data and that button’s presence is driven by an ng-if statement. Even if i did fetch cloud data in some controllers, could i do it before opening the tab?

[leob]

I believe that’s only half true - read this thread for more information.

As you can see, view caching in Ionic only applies to views you’ve visited - it’s not a “pre-cache” solution.
To use pre-caching, you can use a solution like Angular Template Cache, as explained in the thread.

Coincidentally I’ve just completed my new Ionic Starter App which includes an optimized gulp.js file that supports Angular Template Cache:

gulpfile.js

You can use this gulp file (or a variant of it) to perform a production build that includes template caching.

(blogged about it here)

[jbalchun]

Thanks a lot Loeb, this is exactly what I’m looking for. Though I am having some trouble getting it working.
My folder structure:

www/
tab-calendar.html (etc. html here and in some subfolders)
-----/js/
---------template.js
and I’m generating $templateCache.put(“tab-calendar.html”,

This seems right but it isn’t working, this block in your gulp confuses me
.pipe(templateCache({
standalone: true,
root: ‘js’
}))

My gulp:
var paths = {
sass: [’./scss//*.scss’],
templates: [’./www//*.html’],
dist: [’./www’]
};
gulp.task(‘templates’, function() {
gulp.src(paths.templates)
.pipe(templateCache({
standalone: true
}))
.pipe(gulp.dest(paths.dist + ‘/js’));
});

Anyway thanks in advance I’ll keep wrestling w/ it.

[leob]

@jbalchun Well I think I know the reason why …

Your templates are right under the root www directory (and subdirectories of it), while my templates are under “js” (together with my Javascript files - I keep everything together).

This is the reason why I have “root: ‘js’” in my gulp file.

I think that in your case you need to put “root: ‘’” (empty) then.

Tip: you can check this theory as follows by running your app in a browser (“ionic serve”) after the gulp build.
Do the gulp build, then do “ionic serve” and in your browser (Chrome or Safari or whatever) open the Developer Tools.

(so that would be the Chrome developer tools or the Safari developer tools etc)

In the developer tools open the Network tab and reload your app.

You will then probably see HTTP 404 for the templates that can’t be loaded.

Look at the path for the “404” files and you will probably see what’s wrong in the path and what you need to fix in the gulp task.

I had this too and in my case the problem was that it had “root: ‘templates’” instead of “root: ‘js’” which it had to be in my case.