This is a preview-quality chapter of our continuously deployed eBook on AngularJS for .NET developers. You can read more about the project at http://henriquat.re. You can also follow us on twitter (Project: @henriquatreJS, Authors: @ingorammer and @christianweyer)

AngularJS and IE 8

If you are using IE8 as your main browser, you will have noticed that the demos in the previous chapters looked less than stellar. In fact, none of them might have worked as expected. (To be fair, the same problem would manifest itself with older versions of Firefox which have been released during the same timeframe as IE8. It's just that we've noticed that hardly anyone runs ancient Firefoxes, while IE8 is still used in the wild, especially if you're targeting commercial users in certain industries.)

Now, these problems don't stem from the fact that AngularJS can not be used with IE8 at all, but mainly because we've decided to forgo the necessary changes to the HTML to avoid complicating the samples. All of the following will only be necessary if you need to target IE8.

To look at the necessary steps to make your AngularJS application compatible with IE8, let's re-examine one of the samples from The two minute guide to AngularJS for .NET developers. In this sample, we've been a controller like the following.

function UserController($scope) {
   $scope.userList = [
      new User("John", "Doe"),
      new User("Henri", "de Bourbon"),
      new User("Marguerite", "de Valois"),
      new User("Gabrielle", "d'Estrées")
   ];

   // select the first user of the list
   $scope.currentUser = $scope.userList[0];

   // expose a callable method to the view
   $scope.selectUser = function (user) {
      $scope.currentUser = user;
   }
}

This controller has been used within an ng-app like this:

<div ng-app ng-controller="UserController">
    <b>Names</b>
    <ul>
        <li ng-repeat="user in userList">
            <a ng-click="selectUser(user)">{{user.getFullName()}}</a>
        </li>
    </ul>

    <hr>
    <b>Selected User</b><br>

    First Name: <input type=text ng-model="currentUser.firstName"> <br>
    Last Name: <input type=text ng-model="currentUser.lastName"><br>
    Full Name: {{currentUser.getFullName()}}
</div>

If you would run this demo in IE8, you would see the following instead of the expected output.

To work around some of the HTML-processing peculiarities of Internet Explorer 8, you will - at the very least - have to change the HTML in a few places, to add an ID="ng-app" information to the root container of your AngularJS-Application. In addition, you have to make sure that your <a>-tags contain valid href-attributes.

<div id="ng-app" ng-app ng-controller="UserController">
    <b>Names</b>
    <ul>
        <li ng-repeat="user in userList">
            <a href="#" ng-click="selectUser(user)">{{user.getFullName()}}</a>
        </li>
    </ul>

    <hr>
    <b>Selected User</b><br>

    First Name: <input type=text ng-model="currentUser.firstName"> <br>
    Last Name: <input type=text ng-model="currentUser.lastName"><br>
    Full Name: {{currentUser.getFullName()}}
</div>

After this change, the demo should behave as expected in IE8:

If you receive an error, as soon as you click on one of the links in your application in IE8 you're running into another peculiarity of IE8. In this example, your browser might display the following warning instead of selecting the desired user. As you can see, the URL is displayed as unsafe: and the error message (incorrectly) states that "The webpage cannot be displayed [...] Some content or files on this webpage require a program that you don't have installed".

To work around this problem, please make sure to always include href-attribute in your <A>-tags, for example <a href='#'>.... Otherwise IE might determine that your link is unsafe (for no particular reason ...).

This was a preview-quality chapter of our continuously deployed eBook on AngularJS for .NET developers. If you enjoyed this chapter, you can read more about the project at http://henriquat.re. You can also follow us on twitter (Project: @henriquatreJS, Authors: @ingorammer and @christianweyer)