AngularJS on IE7 not working: how to fix it.

We must tag accordingly

The main issue with IE7 is its lack of support for HTML5 tags, so we have to tag our AngularJS HTML template accordingly to make sure it will load our app.

So here's how it got it to work:

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

Now I have seen many sites suggesting adding those attributes on the <html> tag, but for me it doesn't work! So stick with the body tag and you should be a much happier person!

Then, we need to tag our ng-view accordingly as well:

<div class="ng-view"></div>

Using the class binder is safer than trying to support for <ng-view>

Adding support for JSON

You will need to load this JSON polyfill for IE7 and IE8

<!--[if lte IE 8]>
    <script src="/static/js/libs/json3.min.js"></script>
<![endif]-->

http://bestiejs.github.com/json3/

Supporting for special tags

AngularJS developer site provides a great starting guide on adding support for special tags on IE7, so here's a good way to start:

http://docs.angularjs.org/guide/ie

This is what they suggest:

<html xmlns:ng="http://angularjs.org">
    <head>
        <!--[if lte IE 8]>
        <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
        </script>
        <![endif]-->
    </head>
    <body>
    ...
    </body>
</html>

Though I am not using it, I'd rather stick to the old fashion class binding system!

< / >