Geek Answers Handbook

How to get AngularJS routing to work with IE 8

I have a clean AngularJS 1.2.8 application that I am just starting. Routing does not work on IE 8, but it works on any other browser (including IE 9). There are no errors in the console. Angular just does not start the route.

Can someone point me in the right direction? I have already reviewed the Angular IE 8 document and have not given any guidance.

HTML ...

<!doctype html> <html id="ng-app" data-ng-app="app"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <title>Learning Content Portal</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <!-- placeholder for views --> <div data-ng-view></div> </div> <!-- /container --> <script src="js/vendor/jquery-1.10.1.min.js"></script> <script src="js/vendor/json3.min.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/vendor/angular/angular.min.js"></script> <script src="js/vendor/angular/angular-route.min.js"></script> <script src="js/app.js"></script> </body> </html>

And app.js ...

 var app = angular.module('app', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider .when('/searchCourses', { templateUrl: 'partials/searchCourses.html', controller: 'controller_searchCourses' }) .when('/editCourse', { templateUrl: 'partials/editCourse.html', controller: 'editCourseController' }) .otherwise({ redirectTo: '/searchCourses' }); }); app.controller('controller_searchCourses', function ($scope) { alert('test'); });

It’s also partial there, but I don’t think it is important because it never fires a warning (or loads a partial one).

 <div class="container"> <div> Course Count: {{courses.length}} <ul> <li data-ng-repeat="course in courses | orderBy:course.name">{{ course.name }}</li> </ul> </div> <br /> <div> Name: <input type="text" data-ng-model="newCourse.name" /><br /> Owner: <input type="text" data-ng-model="newCourse.owner" /><br /> Code: <input type="text" data-ng-model="newCourse.code" /><br /> Status: <input type="text" data-ng-model="newCourse.status" /><br /> <br /> <button class="btn btn-default" data-ng-click="addCourse()">Add New Course</button> </div> </div>
+6
source share
4 answers

You did not specify a namespace in your html

<html xmlns:ng="http://angularjs.org">

and the documents indicate that this is necessary.

+4
source

I added this line to the configuration function ...

 $locationProvider.html5Mode(false);

... which did not help. But then I retreated to Angular 1.2.6, and it worked. Something was introduced in 1.2.7 that breaks IE 8 modules / routing.

+1
source

In Angular 1.2.7, a change was made that distorted routing on IE8. Here is the commit . It really didn't break, it's just a security setup issue. If you go to "Tools → Internet Options → Advanced → Security → Enable Embedded XMLHTTP Support" and check it, then it works again.

You probably can't just enable this setting for all users on your corporate network (that was my business), so you can do 2 things.

  • The first uses Angular 1.2.11 or later. They made another change in this version that triggered routing in ie8. However, I have not tested other things, but I believe that everything should work correctly in this version.
  • If you need to stick with Angular 1.2.8 (or any version from 1.2.7 to 1.2.10), you can add this to the script tags to your index.html after loading Angular, then it should work again:




 (function() { window.XMLHttpRequest = window.XMLHttpRequest || (function() { return new window.ActiveXObject("Microsoft.XMLHTTP"); }); })();

code>
+1
source

I think something is wrong with the way you write your routing, try the following:

  app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/searchCourses', { templateUrl: 'partials/searchCourses.html', controller: 'controller_searchCourses' }) .when('/editCourse', { templateUrl: 'partials/editCourse.html', controller: 'editCourseController' }) .otherwise({ redirectTo: '/searchCourses' }); }]);

If the above still does not solve the problem, try the following:

  • To run angular manually, put the code below inside your document on the document

    angular.bootstrap(document, ['app']);

  • Delete / update jquery, once it is jQuery which is incompatible / causes problem in IE8

Hope this helps!

0
source

More articles:


All Articles