Geek Answers Handbook

AngularJs templates do not load in Internet Explorer 8

I cannot display AngularJs templates in Internet Explorer 8, I have used several suggestions for using AngularJs in Internet Explorer, but I still cannot get it to work. below is my html code for the page, including the scripts that I used. Can I indicate if I am using anything that could make the code broken in Internet Explorer? I can download information about other files if someone would like to know more about this. Everything works fine in all other browsers, but just in 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 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.imtqy.com/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>
+7
javascript html angularjs internet-explorer angular-ui
source share
1 answer

I am working on an AngularJS project at a time when Internet Explorer 8 support is required. Everything works in thin cross-browsers, including IE 8.

If you need to provide IE8 support, the first tip for you is to not use custom element tags such as <mynewtag> (use the version of the <div mynewtag> attribute <div mynewtag> ).

This will save you a headache when creating elements on the fly, like this: <!--[if lte IE 8]><script> document.createElement('mynewtag');</script><![endif]-->

Below you can find my index.html, downloaded 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 this helps.

+8
source share

More articles:


All Articles