Internet Explorer caching behavior for RESTful data pulled by AngularJS

Hi, There:

A UI tester told me an AngularJS app doesn’t work in IE11, but works fine in Chrome or FF. So I gave it try and tested it in IE. In order to see how things are doing, I turned on the Developer tool to see what the console says and how network traffic moves – and you guessed it – everything works just fine! Soon I realized that the tester would never turn on the IE Developer tool when she was testing, so I turned it off. Then I could replicate the problems that she had described to me.

A bit later I realized, by default, IE actually cache the JSON data that AngularJS gets from the server side. But the cache is off when the Developer tool is on. Hence the behavior is different. For Chrome or FF, caching is not on by default. Searching throw sites such as StackOverflow gave similar suggestions. So it looks like force turning off caching in the application should be the right solution to the problem.

Typically there are two solutions to turn off cache, client side and server side. They both should work. But since the app is an AngularJS app that asynchronously gets data from server side’s RESTful services, html <meta> tag like this will not work well since the JSON data requested would not be affected:

<meta http-equiv="Pragma" content="no-cache">   <!-- does not work -->

The solution that will work is to enforce response to be not cached on the server side:

response.setHeader("Cache-Control", "private, no-store, no-cache, must-revalidate");
response.setHeader("Pragma", "no-cache");

 

This should ensure non-caching at the client side for a particular JSON data pulled by AngularJS. Certainly, if caching is desired, it should not be implemented as such. After implemented this, the above AngularJS application whose behavior depends fully on fresh JSON data now works well as expected!

Cheers!

-T. Yan

 

Advertisements

Element Object doesn’t support property or method ‘remove’ In IE

Hi, There:

Happy Thanksgiving!  Drop a few a lines here to record an IE issue, from a version of angularJS datetime picker. The error only happens in IE:

Object doesn’t support property or method ‘remove’. The Code related were something like this:

el.remove();

It is due to that IE doesn’t support remove() function for DOM element.  But if you change to the following, things work much better!

el.parentNode && el.parentNode.removeChild(el);

Hopefully this will help anyone is scratching their heads for this IE issue that doesn’t happen in Chrome or Firefox.

Best,

-Tony

 

 

ngOptions track by to select the matched value from options

Happy Friday!

After AngularJS 1.2, you don’t need to use ng-repeat to display options for <select> element. Instead, it is recommended to use ng-options, such as this below,  where items is an Array of object item.

<select ng-model=”selectedItem” ng-options=”item as item.label for item in items”></select>

However, the above doesn’t display the selectedItem as selected if there is a match with the value of the object in the Array items.

 

No worries! AngularJS now has a nice expression to make that so easy to achieve, by using track by:

<select ng-model=”selectedItem” ng-options=”item as item.label for item in items track by item.value“></select>

Now if there is a match of values between the selectedItem and one Option in the Array, that Option is selected!

AngularJS really rocks!  well, most of the time 🙂

-TY