Angular Script Loading inside partial view - caching issues

Question

I am having issues with loading JavaScripts inside a partial view in my Angular application.

This is my setup: ui-router sets the ui-view for requests to /profile as <app-home-profile></app-home-profile>.

The appHomeProfile directive is set up as follows:

app.directive('appHomeProfile', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/user/profile.html',
        controller: ...,
        controllerAs: 'profileCtrl'
    }
});

Now, inside the profile.html file I include the standard HTML and at the bottom of it some JavaScript dependencies:

<script type="text/javascript" src="/javascripts/myScript1.js"></script>
<script type="text/javascript" src="/javascripts/myScript2.js"></script>

The problem is that the server logs show that Angular is adding the timestamp to the requests, therefore not allowing to cache any of the scripts! This doesn't happen with scripts loaded the "usual" way in the head of the document.

GET /javascripts/myScript1.js?_=1437207405398 200 2.356 ms - 22524
GET /javascripts/myScript2.js?_=1437207405399 200 1.873 ms - 29695

Any help on how to solve this is appreciated!

Thanks, Nick

Answer 1

As opposed to jQuery, Angular doesn't support <script> in requested templates because of jqLite simplified implementation. It can be fixed like that.

The reason why it works in your example is because you're using jQuery in your app, so it manages DOM instead of jqLite. Timestamps in AJAX requests are added to disable browser caching, it is default behaviour for jQuery. It can be disabled with

app.config(function () {
  angular.element.ajaxSetup && angular.element.ajaxSetup({ cache: true });
});