Web Snippets: Running angular applications in IE 8 and other browsers

Monday, February 29, 2016

Running angular applications in IE 8 and other browsers

We recently published a angular application to production. There was couple of tickets created with "Application failing in Enterprise mode in IE" .

What is Enterprise mode?

A compatibility mode that runs on Internet Explorer 11 on Windows 8.1 Update and Windows 7 devices, lets websites render using a modified browser configuration that’s designed to emulate either Windows Internet Explorer 7 or Windows Internet Explorer 8, avoiding the common compatibility problems associated with web apps written and tested on older versions of Internet Explorer.

Issue

AngularJS 1.3 has dropped support for IE8.

How to run angular applications in IE 8?

I spent some time on running angular applications in IE 8.

Solution

1) Detect if the browser is IE 8.

2) After detecting the browser get the script which is relevant to IE 8 . Angular js file < 1.3

3) All others browsers we can use the latest scripts

These 3 steps can be achieved as shown below

   <!--[if lte IE 8]>
       <script type="text/javascript" src="/Scripts/core/angular-1.2.28.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
        <script src=@CacheBuster.Tag("/Scripts/release/core.min.js")></script>
        <!--<![endif]-->

I have written a simple code which gets the data and displays it in a table using ng-repeat.
Note: We can use only the directives which would run in IE 8

Edit code in plunker

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
     <!--[if lte IE 8]>
       <script type="text/javascript" src="/Scripts/core/angular-1.2.28.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!--> <!--<![endif]-->
  </head>
  <body>
    <h1>Running angular application in IE 8</h1>
    <script data-require="angular.js@*" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
    <meta charset="utf-8" />
    <div class="container" ng-controller="userCtrl">
      <h2>Angular sorting</h2>
      <div class="row">
        <table class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th ng-click="sort('StudentNo')">
                    Student No
      <span class="glyphicon sort-icon" ng-show="sortKey=='StudentNo'" ng-class="{'glyp               hicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>

</th>
              <th ng-click="sort('FirstName')">
                    First Name<span class="glyphicon sort-icon"

ng-show="sortKey=='FirstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="users in Users |orderBy:sortKey:reverse">
              <td>{{users.StudentNo}}</td>
              <td>{{users.FirstName}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
    //declare a module
    var myAppModule = angular.module('myApp', []);
    myAppModule.controller('userCtrl', function ($scope) {
        $scope.Users =
        [
             { "StudentNo": "1", "FirstName": "Prathap"},
             { "StudentNo": "2","FirstName": "John"},
             { "StudentNo": "3","FirstName": "Peter"}
 
        ];
        //Function for sorting
        $scope.sort = function(keyname) {
            $scope.sortKey = keyname; //set the sortKey to the param passed
            $scope.reverse = !$scope.reverse; //if true make it false and vice versa
        };
    });
    </script>
  </body>
</html>