The rogue behavior of AngularJS in notorious world of IE
Posted By : Paras Jain | 08-Jan-2017
AngularJS, the javascript framework that is used widely for Single Page Applications works seamlessly in modern browsers however when it comes down under the influence of the notorious Internet Explorer, it tends to go rogue.
As developers we must have face several issues while testing our applications on the IE, while the features that might be working on most browsers they might be behaving differently on IE.
However if we follow certain things while coding our application we could overcome the rogue behaviour of AngularJS under notorious IE.
Since the release of AngularJS 1.3, the support for IE versions 8 and below has been discontinued. So if you’re planning to deploy your application to target those versions as well then you’ll have to do some extra work which I’ll be describing later in this blog.
However given the notorious nature of IE we still cannot guarantee that the latest version of Angular will run without any problems on IE 8 and above. So to fix it we can follow certain guidelines as stated below :
-
Do not use expression tags to bind style, instead use ng-style tag.
-
For the type attribute of buttons, the ng-attr-type should be used.
-
For the value attribute, the ng-attr-value should be used.
-
For the placeholder attribute, the ng-attr-placeholder should be used.
The above guidelines should help you a bit to normalize the behaviour of AngularJS. Although there’s more to be done if you are targeting versions below IE 9.
-
IE has it’s way of not liking the element names that starts with the a prefix in our case ng, as it considers it as the XML Namespace and so it will ignore it.
To fix it our elements need to have a corresponding namespace declaration.
<html xmlns:ng="http://angularjs.org">
-
Use JSON3 or JSON2 implementations to polyfill JSON.stringify to make Angular work with IE 7 and below.
-
Set the id attribute of HTML body tag to “ng-app” for using the ng-app attribute.
<body id="ng-app" ng-app="myApp">
-
IE is the only major browser that caches XHR requests. So to avoid this caching issue is to set an HTTP response header of Cache-Control to be no- cache for every request.This behavior is the default behavior for modern browsers and helps to provide a better experience for IE users.
This can be changed as :
.config(function($httpProvider) {
$httpProvider.defaults
.headers.common['Cache-Control'] = 'no-cache';
});
The overall guidelines shall help in preventing the rogue behaviour of any AngularJS application in IE and make our application more user friendly and smooth for the IE users.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Paras Jain
Technical Lead with wide experience in developing industry grade applications in Spring Framework, Spring Boot and Grails. When he is not programming he can be found at some mountain reading a book or some club chilling with friends.