Running AngularJS App on Internet Explorer 7

Question

Just to make sure if AngularJS works on the browsers I need, I made a simple data-binging demo that works fine on Firefox, Chrome an IE8+ but I also need to make it work on IE7. Unfortunatelly I can't make it work on it. It only shows the html with the curly braces on it, ignoring ng- attributes.

I have checked several posts about AngularJS on Internet Explorer and tried the suggested fixes on each one but nothing works on my demo.

This is the HTML of my demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Angular IE7 Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--[if lt IE 9]>
<script type="text/javascript" src="angularjs/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript" src="angularjs/json3.js"></script>
<![endif]-->
<script language="JavaScript" src="angularjs/angular.min.js"></script>
<script language="JavaScript" src="angularjs/test.js"></script>
</head>
<body class="ng-app">
    <div ng-controller="serversCtrl">
        <p>{{texto}}</p>

        <table border="1">
            <tbody>
                <tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
                <tr ng-repeat="item in items"><td>{{item.col1}}</td><td>{{item.col2}}</td><td>{{item.col3}}</td></tr>
            </tbody>
        </table>
    </div>
</body>
</html>

And this is the test.js javascript containing the controller and the models:

function serversCtrl($scope, $http, $location) {
    $scope.texto = "Texto dinamico";
    $scope.items = [
        {col1: "foo1", col2: "bar1", col3: "baz1"},
        {col1: "foo2", col2: "bar2", col3: "baz2"},
        {col1: "foo3", col2: "bar3", col3: "baz3"},
        {col1: "foo4", col2: "bar4", col3: "baz4"},
        {col1: "foo5", col2: "bar5", col3: "baz5"}
    ];
}

Am I doing something wrong? Is there any other tip to make it work that I have missed?

EDIT: I'm using AngularJS v1.0.5

Stewie · Answer 1 · 2014-06-28T21:49:58.697

62

1) Add id="ng-app" to your body tag.

<body ng-app="myApp" id="ng-app">

2) Inform your users/client it's 2013.

edited Jun 28 '14 at 21:49

answered Apr 10 '13 at 08:37

Stewie

60,366
20
146
113

Actually I also tried with id="ng-app" as an alternative to class="ng-app" but none of them solved my problem. In my country (El Salvador) people still use Windows XP and Internet Explorer 6 and 7 unfortunatelly but we aree in the process of convincing them to upgrade. Thanks for your answer. – Roberto Linares Apr 10 '13 at 15:24
`id="ng-app"` is not meant as alternative. Both are needed, `ng-app="myApp"`and `id="ng-app"`. – Stewie Apr 10 '13 at 17:05
@RobertoLinares - I thought they used nothing but Linux and Firefox outside of the USA. ;-) – Adam Nofsinger Sep 13 '13 at 18:37
1

@AdamNofsinger According to the user agent logs on my site, there's still plenty of users here using IE6 and 7, specially goverment/big companies users. – Roberto Linares Oct 21 '13 at 14:53
The latest release of Angular-seed has `` would that be ok on its own? – JGallardo Dec 21 '13 at 00:58
@JGallardo I don't know. Try it. – Stewie Dec 23 '13 at 09:37
It's 2017 and still we can find users using ie7 :/ – Cedric Feb 24 '17 at 09:23

score 19 · Accepted Answer · edited Jan 14 '14 at 14:27

After some more reading I could make it work.

The problem with IE7 was the bootstrapping. It was not firing any! so I made a manual initialization as shown in this page and it worked.

This is the code I added to the HTML assuring it will only fire on Internet Explorer 8 or lower (because if I fire it for all browsers some event handlers fire twice for non-ie browsers):

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
        angular.bootstrap(document);
    });
</script>
<![endif]-->

The $document.ready() part is the jQuery way to be sure this code will be executed when everything on the body has been loaded but since I was using jQuery on my site I took advantage of it.

Could you please show me a JSFiddle or Plnkr example? I can't get his working and I would really appreciate a working example. — K-Dawg, Jan 28 '15 at 12:11

Running AngularJS App on Internet Explorer 7

2 Answers2

Linked