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>

23 comments:

  1. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.We are providing AngularJs training in velachery.
    For more details: AngularJs training in velachery

    ReplyDelete
  2. I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.WE are providing AngularJs training in Velachery.
    For more details:AngularJs training in Velachery

    ReplyDelete
  3. Excellent blog thanks for sharing Online marketing has changed how businesses run and succeed in today’s highly competitive world. With Adhuntt Media, your E-commerce store can reach for the stars and find the right customers. Our team of marketing analysts can analyze, strategize and implement the perfect path for you to take to beat your competition and come out as #1.
    digital marketing agency in chennai

    ReplyDelete
  4. Nice blog thanks for sharing Karuna Nursery Gardens provides you with the best nursery solutions for setting you up with a glamorous landscape. That’s right, you have finally found the perfect nursery to set you up with the best house garden in Chennai.
    plant nursery in chennai

    ReplyDelete
  5. Nice blog thanks for sharing Looking for the best place in Chennai to get your cosmetics at wholesale? The Pixies Beauty Shop is the premium wholesale cosmetics shop in Chennai that has all the international brands your salon deserves.
    beauty Shop in Chennai

    ReplyDelete
  6. Your style is very unique compared to other folks I've read stuff from. Many thanks for posting when you have the opportunity, blog Guess I will just book mark this site.
    IELTS Coaching in chennai

    German Classes in Chennai

    GRE Coaching Classes in Chennai

    TOEFL Coaching in Chennai

    spoken english classes in chennai | Communication training

    ReplyDelete
  7. This post is so interactive and informative.keep update more information...
    Hadoop Training in Anna Nagar
    Big data training in chennai

    ReplyDelete