AngularJS app quicker after having gone through multiple views and does not freeze on click to view

Question

I am struggling with understanding why my AngularJS app is performing differently after having viewed one or multiple pages.

What happens is that on the first team when I deploy my website, clear my cache, and then go to the page, the page reacts a bit "slow" in the sense that when you click on opening a new page, nothing happens, and then after a second or two it displays the page.

This does not happen after I visit the affected pages and then retry again. Then its far more smooth. Same if I visit the website a day after.

What can I do to prevent this behavior?

I use angular ui-router, $state.go and the latest AngularJS version.

Caching of the images, templates and js files is probably the reason that it run faster, and when you clear the cache the browser must reload the resources from the server on the first visit — Alon Eitan
– Alon Eitan, Commented Feb 25, 2019 at 17:03
because you didnt cache the templates of your directives/components ! ;) try npmjs.com/package/gulp-angular-templatecache and your app will not execute AJAX calls to fetch directives/components templates — anotherdev
– anotherdev, Commented Feb 25, 2019 at 17:03
+ chrome does cache the templates of angular apps, which isn't really what you really want when rewritting them. — anotherdev
– anotherdev, Commented Feb 25, 2019 at 17:05
I read it through but what remains unclear is what it does. You mean it caches the pages before the first load, such that it is like it went through all these pages before you start? — WJA
– WJA, Commented Feb 26, 2019 at 13:03

WJA · Accepted Answer · 2019-03-12 16:50:56Z

0

This seems to provide a partial answer. Having tested it a bit, if you add this to your app.js, it will preload all templates:

angular
.module('app')
.run(['$state', '$templateCache', '$http',
    function ($state, $templateCache, $http) {
        angular.forEach($state.get(), function (state, key) {
            if (state.templateUrl !== undefined && state.preload !== false) {
                $http.get(state.templateUrl, {cache: $templateCache});
            }
        });
    }
]);

Answer based on response to similar question: https://stackoverflow.com/a/35036896/4262057

answered Mar 12, 2019 at 16:50

WJA

7,05420 gold badges101 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS app quicker after having gone through multiple views and does not freeze on click to view

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related