CODEWITHSUNDEEP
javascriptangularjsinternet-explorer-7
Roberto Linares
Roberto Linares

Reputation: 2225

Running AngularJS App on Internet Explorer 7

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

Upvotes: 18

Views: 18756

Answers (2)

Stewie
Stewie

Reputation: 60416

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

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

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

Upvotes: 62

Roberto Linares
Roberto Linares

Reputation: 2225

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.

Upvotes: 19

Related Questions