20

I have been implementing Routing in my app following the tutorial

http://docs.angularjs.org/tutorial/step_07

I couldn't get my version to work in IE7, and after spending a while trying to work out what I have missed / done wrong I have noticed that the example doesn't work.

http://angular.github.com/angular-phonecat/step-7/app/

Anyone know how to get this to work?

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Tom
  • 12,591
  • 13
  • 72
  • 112
  • Not sure if this is the reason, but according to the FAQ's AngularJS is only tested on IE8+. http://docs.angularjs.org/partials/misc/faq.html – Martin Oct 03 '12 at 14:15
  • 2
    You can also check the documentation which describes everything in detail here: http://docs.angularjs.org/guide/ie – F Lekschas Oct 03 '12 at 19:28
  • @Flek I am not using custom tag names, have also tried the bits mentioned in the comments but nothing in the ie guide helped – Tom Oct 04 '12 at 09:00
  • 3
    we don't test on IE7, but we have heard of people who were able to run their angular code in ie7. – Misko Hevery Oct 04 '12 at 16:17
  • @Tom Yes I briefly checked it yesterday as well but had no time to take a closer look. – F Lekschas Oct 04 '12 at 19:31
  • 4
    @MiskoHevery haha.. "We have heard of people" ... were they from shadowy places? Doing dark things? I'm interested to see this work, as I suspect voodoo. – Ben Lesh Oct 16 '12 at 19:53

1 Answers1

54

OK I had the same problem so I started the bounty, but after that I found the working solution (for me at least):

  • Use HTML5 shim
  • Use JSON2.js

  • Add all these attributes to your html node:

    class="ng-app:myapp" id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"

(where myapp is really your app name)

So to recap, here is my IE7/8/9 working HTML page:

<!DOCTYPE html>
<html lang="en" class="ng-app:myapp" id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org">
  <head>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
      </script>
    <![endif]-->
    <!--[if lt IE 8]>
      <script src="js/json2.js"></script>
    <![endif]-->
  </head>
  <body>
    <div ng-view></div>
  </body>
</html>
adrien
  • 4,399
  • 26
  • 26
  • 1
    Why does the id="ng-app" have to be on html tag? I need to move it to a child div, is this not possible? – Neil Aug 22 '13 at 15:06
  • @Neil it is possible. You can select any div for that matter. Angular will take control of the content inside that div. If you want angular across the whole page you can as well use the directive at the html tag – hustler Aug 22 '13 at 18:07
  • 2
    I still can't get routing to work. Can you post the complete code please? – rro Sep 13 '13 at 17:04
  • 1
    If someone has routing working in IE7, it would help a lot to provide the complete HTML/JS boilerplate. (angular is not even included in the sample code above). Currently I have my app working in IE 7 except for routing that seems to always fallback to the `otherwise` part of the $routeProvider configuration. Events like $routeChangeStart are fired too. – grandouassou Sep 20 '13 at 13:52
  • I've got routing in IE7 working! Look at my forked [angular-ie7.js](https://github.com/tscheibl/angular-ie7.js) repo for the fixes I have added. It even works on IE6 now (as far as I've tested). Of course it still works for all the modern browsers (I hope). This needs to be done in addition to the suggestions in adrien's answer to allow for a (hope-)fully functional angular.js on IE7. –  Nov 30 '13 at 18:16
  • Dude, you need to update your answer. Nowadays you also need to disable the sceProvider. You can do that by setting $sceProvider.enabled(false) inside the module config(). Cheers – rogerc Jun 24 '14 at 14:54