I'm having to downgrade AngularJS from 1.3 to 1.2.28 so that I can support IE8 (my client decided they needed to support it after we got started). The first step I took was to change all the references to AngularJS to 1.2.28 as such:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Here is my setup in my app.module.js :
(function () {
'use strict';
angular
.module('mn', [
'ngRoute',
'angularSpinner',
'angular-cache',
'ngSanitize',
'ui.bootstrap',
'mn.catalog',
'mn.common',
])
.run(CacheSetup);
CacheSetup.$inject = ['CacheFactory'];
/** @ngInject */
function CacheSetup(CacheFactory) {
CacheFactory.createCache('profileCache', {
maxAge: 30 * 60 * 1000, //30 min
deleteOnExpire: 'aggressive',
storageMode: 'sessionStorage',
storagePrefix: 'si-cache.caches.'
});
CacheFactory.createCache('ransCache', {
maxAge: 30 * 60 * 1000, //30 min
deleteOnExpire: 'aggressive',
storageMode: 'sessionStorage',
storagePrefix: 'si-cache.caches.'
});
}
})();
Here is my app.routes.js file:
(function () {
'use strict';
angular
.module('mn')
.config(config);
config.$inject = ['$routeProvider'];
/** @ngInject */
function config($routeProvider) {
$routeProvider.
when("/AccountSettings", {
templateUrl: "/angularRoot/modules/accountSettings/login.html",
controller: 'AccountSettingsController as vm',
caseInsensitiveMatch: true
})
.otherwise({
redirectTo: '/welcome'
});
}
})();
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="angularRoot/externalReference/spin.min.js"></script>
<script src="angularRoot/externalReference/vendor/jquery.main.js"></script>
<script src="angularRoot/externalReference/d3.min.js"></script>
<script src="angularRoot/externalReference/linq.min.js"></script>
<script src="angularRoot/externalReference/respond.min.js"></script>
<script src="angularRoot/core/app.module.js"></script>
<script src="angularRoot/core/app.routes.js"></script>
<script src="angularRoot/modules/accountActivity/accountActivity.module.js"></script>
<script src="angularRoot/modules/accountActivity/accountActivity.controller.js"> </script>
<link href="css/3rdParty/bootstrap.css" rel="stylesheet" />
<link href="css/vendorStyles.css" rel="stylesheet" />
<link href="css/Styles.css" rel="stylesheet" />
</head>
<body ng-app='mn' ng-strict-di>
<div id="wrapper" ng-view>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
</body>
</html>
I'm getting this error in Google Chrome and the page is completely blank:
Failed to instantiate module mn due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=...)
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:6:450
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:34:97
at r (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:7:290)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:33:207)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:33:284
at r (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:7:290)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:33:207)
at ec (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:36:309)
at c (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:18:170
Please dont use this directive 'ng-strict-di'. It is introduced in angular 1.3 .Here is the attached link for reference
http://bartwullems.blogspot.in/2014/10/angularjs-13-ng-strict-di-directive.html