As mentioned in a discussion about IE caching issues, Internet Explorer tends to cache things when using ajax with AngularJS, causing potential problems. You can find a helpful solution to this problem here.
Given that we have multiple angular apps on our site, I believe it's important to proactively address the caching issue to assist developers working on these apps. By incorporating the suggested solution into all Angular apps as part of our style guide, developers are more likely to implement it and avoid running into the troublesome IE caching problem. Plus, let's face it, not many developers focus on developing for IE anymore.
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
// routes go here...
}]);
This code snippet essentially prevents IE from caching templates and forces server requests for $http calls instead of relying on cached data (which may not be ideal for dynamic content). However, adding this code to every Angular app raises an issue - some apps may not include ngRoute in their dependencies, leading to injection errors.
So, the question arises: Is there a way to check for the existence of injected dependencies in Angular? It would be great if we could implement something like the following:
var myapp = angular.module('ordersApp', [
'ngTouch',
'ngRoute',
'ngAnimate',
'myController'
]);
if(myapp.has_ngRoute) {
myapp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
// routes go here...
}]);
}