Compatibility with IE7 Angularjs

Question

Is it possible to combine code angular with IE7?
What you need to mount and write to this minimum sample to work in IE7?

<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app='app'>
<head>
    <!--[if lte IE 8]>
        <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <meta charset="UTF-8">
    <title>Tests</title>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body>
    <div ng-controller="ButtonCtrl" ng-init="name = ''">
        <button id="start-button" ng-click="run('Brrrr!!!')">push</button>
        <p>{{name}}</p>
        <p ng-init="count = 0">{{count}}</p>
    </div>
</body>
</html>

Why do you need to support IE7? :) In Angular 1.3 they even drop IE8 support. Because even that browser is ancient. — ThiefMaster
– ThiefMaster, Commented Jun 28, 2014 at 9:37

Jon · Accepted Answer · 2014-06-28 09:33:33Z

I've never tired with IE7 but for IE8 I put the below html in. Which basically polyfills HTML5 elements, CSS3 selectors and media queries. You might also want to look at es5 shims (https://github.com/es-shims/es5-shim). However, it you use all the native angular methods i.e. angular.forEach(...) you might be ok without this. As always you need to really test this in all browsers!!!!

<!DOCTYPE html>
<!--[if IEMobile 7 ]>    
<html class="no-js iem7" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="fsn"> <![endif]-->
    <!--[if (gt IEMobile 7)|!(IEMobile)]><!-->
    <html class="no-js" id="ng-app" ng-app="fsn">
    <!--<![endif]-->

    <head>
      <!--[if lte IE 8]>
        <script>
            document.createElement('ng-include');
            document.createElement('ng-switch');
            document.createElement('ng-if');
            document.createElement('ng-pluralize');
            document.createElement('ng-view');

            // needed to enable CSS reference
            document.createElement('ng:view');
        </script>
        <![endif]-->

      <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
        <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
        <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
        <![endif]-->

      <meta charset="utf-8">

      <script src="../vendor/modernizr/modernizr.js"></script>
    </head>

It is also worth looking at the APIs that IE7 wouldn't support 'console' for example. The angular team say they only support down to IE8 with Angular <1.2.x so you might have to play about with it to get it to work smoothly.

I have IE8 working well but it does noticeably struggle with loading some larger pages as it is so slow.

Collectives™ on Stack Overflow

Compatibility with IE7 Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related