Angular Views/Routes in IE8

StackOverflow https://stackoverflow.com/questions/21533416

Question

I followed this document: http://docs.angularjs.org/guide/ie

But still I do not see the views in IE8. It works fine in modern browsers. Does ngRoute helper module support IE8? Any suggestions?

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="demoApp">
  <head>
    <!--[if lte IE 8]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body> 
    <div class="container">
        Search by: 
        <span class="searchby"><a href="#/nameSearch">Name</a> | <a href="#/">Back</a></span>
        <div ng-view=""></div>
    </div>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script>
        var demoApp = angular.module("demoApp", ["ngRoute"]);
        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when ('/',
                    {
                        templateUrl: "views/welcomePage.html",
                        controller: "SimpleController"
                    })
                .when ('/nameSearch',
                    {
                        templateUrl: "views/nameSearch.html",
                        controller: "SimpleController"
                    })
                .otherwise ({ redirectTo: '/' });
        })

        demoApp.controller("SimpleController", function ($scope) {
        })          
    </script>   
</body>

Was it helpful?

Solution

I figured out what was really happening. The first view wasn't displaying in IE8 and IE9. But the views were working. I switched ng-route for ui.router and added the following to the header and it now works fine.

<meta http-equiv="X-UA-Compatible" content="IE=8">

OTHER TIPS

Yes ngRoute works in IE8 but can be tricky to setup. I have a working app and I use something as follows:

<html xmlns:ng="http://angularjs.org" class="ng-app:demoApp" id="ng-app" ng-app="demoApp">
<head>
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!--[if lte IE 8]>
        <script src="scripts/json2.js"></script>
    <![endif]-->

     <!--[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>

Json2: https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top