AngularJS and Internet Explorer

The latest release of Angular (1.3.0) has dropped support for IE8. This chapter is left intentionally in the book for 1.2.x releases.

AngularJS works seamlessly with most modern browsers. Safari, Google Chrome, Google Chrome Canary, and Firefox work great. The notorious Internet Explorer version 8 and earlier can cause us problems.

For more information, read the AngularJS docs guide on IE.

If we are planning release our applications for Internet Explorer v8.0 or earlier, we need to pay some extra attention to help support it.

Internet Explorer does not like element names that start with a prefix ng: because it considers the prefix to be an XML namespace. IE will ignore these elements unless the elements have a corresponding namespace declaration:

<html xmlns:my="ignored">

This xmlns:ng=”http://angularjs.org” makes IE feel more comfortable.

If we use non-standard HTML tags, we need to create the tags in the head of the document if we want IE to recognize them. We can do so simply in the head element.

<!doctype html>
<html xmlns:ng="http://angularjs.org">
  <head>
    <!--[if lte IE 8]
      <script>
        document.createElement('ng-view');
        // Other custom elements
      </script>
    <![endif]-->
  </head>
  <body>
    <!-- ... -->

It is recommended that we use the attribute directive form, as we don’t need to create custom elements to support IE:

<div ng-view></div>

To make AngularJS work with IE7 and earlier, we need to polyfill JSON.stringify. We can use the JSON3 or JSON2 implementations.

In our browser, we need to conditionally include this file in the head. We must download the file, store it in a location relative to the root of our application, and reference it in the head, like so:

<!doctype html>
<html xmlns:ng="http://angularjs.org">
  <head>
    <!--[if lte IE 8]
    <script src="lib/json2.js"></script>
    <![endif]-->
  </head>
  <body>
  <!-- ... -->

To use the ng-app directive with IE support, we set the element id to ng-app, as well.

<body id="ng-app" ng-app="myApp">
<!-- ... -->

We can take advantage of the angular-ui-utils library’s ie-shiv module to help give us custom elements in our DOM.

In order to use the ui-utils ie-shiv library, we need to ensure that we have the angular-ui library installed. Installation is easy if we download the ui-utils library and include the module. We can find the ui-utils library on GitHub here: https://github.com/angular-ui/ui-utils.

Let’s ensure that we’ve included the ui-utils module in an accessible location to your app and include the file just like this:

<!--[if lte IE 8]>
<script type="text/javascript">
  // define our custom directives here
</script>
<script src="lib/angular-ui-ieshiv.js"></script>
<![endif]-->

With that in place, we only activate the ie-shiv on Internet Explorer versions 8 and earlier. The shiv enables us to add our custom directives onto its global object, which, in turn, creates the proper declarations for IE.

The shiv library looks for the window.myCustomTags object. If the window.myCustomTags is defined, the library will include these tags at load time along with the rest of the Angular library directives:

<!--[if lte IE 8]>
<script type="text/javascript">
  // define our custom directives here
  window.myCustomTags = ['myDirective'];
</script>
<script src="lib/angular-ui-ieshiv.js"></script>
<![endif]-->

Ajax Caching

IE is the only major browser that caches XHR requests. An efficient way to avoid this poor behavior 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.

We can change the default headers for every single request like so:

.config(function($httpProvider) {
  $httpProvider.defaults
    .headers.common['Cache-Control'] = 'no-cache';
});
 
This page is a preview of ng-book.
Get the rest of this chapter plus 600 pages of the best Angular content on the web.

 

Ready to master AngularJS?

  • What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall? Imagine how quickly you could work if you knew the best practices and the best tools?
  • Stop wasting your time searching and have everything you need to be productive in one, well-organized place, with complete examples to get your project up without needing to resort to endless hours of research.
  • You will learn what you need to know to work professionally with ng-book: The Complete Book on AngularJS or get your money back.
Get it now