AngularJs templates not loading in internet explorer 8

javascript html internet-explorer angularjs angular-ui

11,929

I am working on AngularJS project at the moment where Internet Explorer 8 support is required. Everything is working fine cross browsers - including IE 8.

If you need to give IE8 support my first advice for you is to not use custom element tags such as <mynewtag> (use the attribute version <div mynewtag> instead).

It will save you the headache of creating elements on the fly like this one: 

Below you can find my index.html bootstrapped for AngularJS to work with IE 8:

<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp"> 
<![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js" ng-app="myApp"> 
<!--<![endif]-->
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title ng-bind="header"></title>
   <meta name="description" content="">

   <!-- build:css({.tmp,app}) system/css/main.css -->
   <link rel="stylesheet" href="system/css/main.css">
   <!-- endbuild -->

   <!--[if IE 8]>
       <script src="ui/components/es5-shim/es5-shim.js"></script>
   <script src="ui/components/json3/lib/json3.min.js"></script>
   <![endif]-->
   </head>
<body ng-controller="myAppCtrl">


<!-- Add site or application content here -->
<div class="content" ng-view=""></div>

<!-- build:js system/js/plugins.js -->
<script src="ui/components/angular/angular.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) system/js/scripts.js -->
<script src="system/js/app.js"></script>
<script src="system/js/filters/filters.js"></script>
<script src="system/js/controllers/controllers.js"></script>
<script src="system/js/services/services.js"></script>
<script src="system/js/directives/directives.js"></script>
<script src="system/js/scripts.js"></script>
<!-- endbuild -->
<!-- build:js system/js/modules.js -->
<script src="ui/components/angular-resource/angular-resource.js"></script>
<script src="ui/components/angular-cookies/angular-cookies.js"></script>
<script src="ui/components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
</body>
</html>

Hope that's helpful.

11,929

Author by

hilarl

UI Designer / Developer for the web and mobile with more than 13 years of experience in the field. Experienced in working with HTML, CSS (LESS, SASS, Twitter Bootstrap), Javascript (AngularJS, BackboneJS, GRUNT, Yeoman, Bower), Photoshop, Illustrator, Fireworks, designing for the web + mobile and working with teams (Knowledge of GIT and Jira). Familiar with PHP, Java, Python, Ruby, MongoDB, MySQL.

Updated on June 26, 2022

Comments

hilarl about 2 years

I am not able to render AngularJs templates in Internet Explorer 8, I have followed several suggestions for using AngularJs in Internet Explorer but I am still not able to get it to work. below is my html code for the page including the scripts I have used. Is it possible to point out if I am using anything that could make the code not work in Internet Explorer? I can upload details of other files if anybody would like to know the details of it. Everything works perfectly on all other browsers but just Internet Explorer.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tripApp" class="no-js"> <!--<![endif]-->
  <head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!-- build:css({.tmp,app}) styles/main.css -->
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
        <link rel="stylesheet" href="styles/main.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
        <style>
            @-moz-document url-prefix() {
                    .filter-menu .btn {
                        padding: 0;
                    }
                }
        </style>
        <!-- endbuild -->
        <script src="bower_components/modernizr/modernizr.js"></script>

        <!--[if lte IE 8]> <script src="scripts/angular-ui-ieshiv.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]-->

        <!--[if lt IE 7]>
            <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
        <![endif]-->
        <!--[if lt IE 8]>
            <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
        <![endif]-->
        <!--[if lt IE 9]>
            <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
        <![endif]-->
        <!-- <script src="bower_components/less/dist/less-1.4.2.min.js"></script> -->   
</head>
<body>
    <!--[if lt IE 8]>
      <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

    <!--[if lt IE 9]>
      <script src="bower_components/es5-shim/es5-shim.js"></script>
      <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- Add your site or application content here -->
    <aside id="sidebar">
        <ul class="list-unstyled">
            <li><a href="#/hotels" prevent><span class="icon-briefcase icon-2x"></span></a></li>
            <li><a href="#/restaurants" prevent><span class="icon-food icon-2x"></span></a></li>
            <li><a href="#/cafe" prevent><span class="icon-coffee icon-2x"></span></a></li>
        </ul>
    </aside>
    <section id="topbar">
        <ul class="list-unstyled">
            <li><span class="icon-briefcase icon-2x"></span></li>
        </ul>
    </section>

    <section id="main-container">
        <section ui-view id="main-inner-container"></section>
    </section>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
      var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src='//www.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="bower_components/jquery-easing/jquery.easing.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-promise-tracker/promise-tracker.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/services.js"></script>
    <script src="scripts/directives.js"></script>
    <script src="scripts/controllers/hotelsController.js"></script>
    <script src="scripts/controllers/restaurantsController.js"></script>

    <script src="bower_components/masonry/masonry.js"></script>

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <!-- endbuild -->
  </body>
</html>

Blaise over 9 years

Sorry but where do es5-shim.js and json3.min.js come from? Are they included in jQuery UI or downloaded separately?
Thiago C. S Ventura about 9 years

you can use bower to download it or use it as remote URL