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?

6
  • Not sure if this is the reason, but according to the FAQ's AngularJS is only tested on IE8+. docs.angularjs.org/partials/misc/faq.html Commented Oct 3, 2012 at 14:15
  • 2
    You can also check the documentation which describes everything in detail here: docs.angularjs.org/guide/ie Commented Oct 3, 2012 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 Commented Oct 4, 2012 at 9:00
  • 3
    we don't test on IE7, but we have heard of people who were able to run their angular code in ie7. Commented Oct 4, 2012 at 16:17
  • 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. Commented Oct 16, 2012 at 19:53

1 Answer 1

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>
Sign up to request clarification or add additional context in comments.

6 Comments

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 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
I still can't get routing to work. Can you post the complete code please?
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.
I've got routing in IE7 working! Look at my forked 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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.