Internet Explorer and Angular JS

Question

Internet Explorer and Angular JS

Currently having a problem in regards to Internet Explorer and angular js.

The html, as shown below, is rendering fine in Chrome and Firefox, however, anything in the ng-view tags does not render at all in IE.

<html xmlns:ng="http://angularjs.org">
<html lang="en" ng-app="poc">
<head>
<meta charset="utf-8">
<title>poc</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="cordova-2.1.0.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>

The partial that I am trying to inject into this is shown below:

<section>
<h1>Proof of Concept</h1>
<ul>
<li><a href="#/phonegap">Try Phonegap Features</a></li>
<li><a href="#/observations">Test Websocket Requests</a></li>
<li><a href="#/persondetails">Test Person Details Requests</a></li>
</ul>
<section>

The code below shows the routing implementation we are using:

'use strict';

angular.module('poc', ['pocFilters', 'pocServices']).
config(['$routeProvider', function($routeProvider){
$routeProvider.
    when('/poc', {templateUrl: 'partials/poc.html',   controller: PocCtrl}).

    when('/observations', {templateUrl: 'partials/observations.html', 
    controller: ObservationsCtrl}).

    when('/phonegap', {templateUrl: 'partials/phonegap.html',
    controller: PhonegapCtrl}).

    when('/persondetails', {templateUrl: 'partials/persondetails.html',
    controller: PersondetailsCtrl}).

    otherwise({redirectTo: '/poc'});
}]);

Anyone have any ideas as to what could be causing the problem in IE?

Thanks,

Patrick

internet-explorer
angularjs

Answer 1

First you should look at angularjs doc on IE. I wrote an IE Shiv for angular-ui which frees you from doing this and when you create element style directives (which ng-view, ng-include etc are), you can instruct shiv of which of your angular modules have these directives.

Answer 2

Add id="ng-app" to the tag in which you are using ng-app directive. In your case the tag is <html>. Hence your html tag should look like the following, in order to make the app rendered in IE.

<html lang="en" ng-app="poc" id="ng-app">

instead of

<html lang="en" ng-app="poc">

Answer 3

The HTML5 elements need a shim (specifically the section tag), you have two html tags when you need just one, you should really have a doctype declared, and you also need to add id="ng-app" to the html tag for IE7 to work.

To shim elements, create a script (file or just a tag) with a document.createElement(); statement for each element - in your case document.createElement('section').

That should set you right.

Answer 4

Angular 1.2 RC1 does not play well with IE 11: it has a CORS issue when routing. The result is that views are not rendered (as their content is not fetched)

If you suspect this is the issue - open the console (F12). You can see the exception there.

This was resolved in Angular 1.2 RC3.