For the concat block of my Gruntfile.js:
concat: {
options: {
stripBanners: false,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
production: {
files: {
'./public/js/build/services.js': ['./public/js/services/*.js'],
'./public/js/build/factories.js': ['./public/js/factories/*.js'],
'./public/js/build/controllers.js': ['./public/js/controllers/*.js'],
'./public/js/build/directives.js': ['./public/js/directives/*.js'],
'./public/js/build/filters.js': ['./public/js/filters/*.js'],
'./public/js/build/plugins.js': ['./public/js/plugins/*.js'],
'./public/js/build/modern-angular.js': [
'./public/bower_components/jquery/dist/jquery.js',
'./public/bower_components/angular-stable/angular.js',
'./public/bower_components/angular-sanitize-stable/angular-sanitize.js'
],
'./public/js/build/old-angular.js': [
'./public/bower_components/jquery-1.11/index.js',
'./public/bower_components/angular-unstable/angular.js',
'./public/bower_components/angular-sanitize-unstable/angular-sanitize.js',
'./public/bower_components/html5shiv/dist/html5shiv.js'
],
'./public/js/build/app.js': [
'./public/js/app.js',
'./public/js/build/services.js',
'./public/js/build/factories.js',
'./public/js/build/controllers.js',
'./public/js/build/directives.js',
'./public/js/build/filters.js',
'./public/js/build/plugins.js'
]
}
}
},
As you may be able to tell with my Gruntfile.js, I'm required to support old, outdated browsers, therefor I have to load two different versions of Angular depending on the browser.
Here's my index.ejs:
<!doctype html>
<html lang="en" class="ng-app:idocs" id="ng-app" ng-app="idocs" xmlns:ng="http://angularjs.org">
<head>
<!-- Omitting to prevent bloating -->
<!--[if lte IE 8]>
<script> var olderIE = true; </script>
<![endif]-->
<script>
if (typeof olderIE === 'undefined') {
// User is using a modern browser, they're awesome.
var script = document.createElement('script');
script.setAttribute('src', '/js/build/modern-angular.js');
document.head.appendChild(script);
}
</script>
<!--[if lte IE 8]>
<script src="/js/build/old-angular.js"></script>
<![endif]-->
</head>
<body data-ng-cloak onload="handleTaggerEvent()">
<!-- Again, omitting -->
<% if(nodeEnv == 'production') { %>
<script src="/js/build/app.js"></script>
<% } else { %>
<script src="/js/build/controllers.js"></script>
<script src="/js/build/directives.js"></script>
<script src="/js/build/factories.js"></script>
<script src="/js/build/filters.js"></script>
<script src="/js/build/plugins.js"></script>
<script src="/js/build/templates.js"></script>
<script src="/js/app.js"></script>
<% } %>
<script src="socket.io/socket.io.js"></script>
<script>
var app = {
// Omitting for brevity
};
// Socket.io stuff
</script>
</body>
</html>
Then in the browser I get littered with the following error. Angular appears to load, but after the rest of the angular code:
