AngularJS HTML Template - IE8

Question

Does anyone know a template pattern for using AngularJS in IE8. There is a whole section in the docs on getting Angular working with IE8 and it seems the steps required are pretty specific, but so far I have not had much success with commands like ng-include

If the steps are pretty specific, then I assume that someone has some kind of boilerplate code somewhere that is confirmed to work with IE8, it would be appreciated if this could be shared. At least if it doesn't work, you at least know that you started with a known baseline and would make it easier to isolate problems.

Answer 1

I created 2 production applications using AngularJS that work fine in IE8 with just a few javascript fixes.

Firstly, if the developer console is not open, the console.log statement will fail. I fixed it with the following js snippet on the start page where the angular application appears:

// Avoid `console` errors in browsers that lack a console. (function() { var method; var noop = function () {}; var methods = [ 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn' ]; var length = methods.length; var console = (window.console = window.console || {}); while (length--) { method = methods[length]; // Only stub undefined methods. if (!console[method]) { console[method] = noop; } } }()); 

Secondly, I use toISOString to convert date stamps. In IE, this function is not implemented, so I use this snippet:

  /*IE8 toISOString hack */ if (!Date.prototype.toISOString) { Date.prototype.toISOString = function() { function pad(n) { return n < 10 ? '0' + n : n } return this.getUTCFullYear() + '-' + pad(this.getUTCMonth() + 1) + '-' + pad(this.getUTCDate()) + 'T' + pad(this.getUTCHours()) + ':' + pad(this.getUTCMinutes()) + ':' + pad(this.getUTCSeconds()) + '.' + pad(this.getUTCMilliseconds()) + 'Z'; }; } 

Thirdly, the forEach method is not supported in IE, so I use this:

 /*IE8 hack to support forEach */ if (!Array.prototype.forEach) { Array.prototype.forEach = function(fn, scope) { for(var i = 0, len = this.length; i < len; ++i) { fn.call(scope, this[i], i, this); } } } 

All of these code snippets were unloaded from StackOverflow answers and work for me, but YMMV.

I read the angular IE8 documentation and I did not come across the situations described in the documentation. For directives, I use the format: <div directive-name> and everything works fine.

Answer 2

Although the question should be more detailed, I can talk about what I did in the past to manage IE8 code.

Instead of worrying about patterns and performance killing procedures, I let yoman handle all this for me.

http://yeoman.io/

Yeomen is a stubborn rake-like helper who can help you build your app faster. Just download the angular and yoman generator to get started.

https://github.com/yeoman/generator-angular

If you don’t want to integrate the yoman into your product, see how the yomen builds an IE8 template and copies it using a test application.

Hope this helps.