Im trying to add AngularJS to my web application which already makes use of RequireJS. I have followed a couple of YouTube and web tutorials but for some reason, when loading my test page, i am seeing:
1) Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=MyApp&p1=%5B%.....
2) TypeError: Modernizr is undefined
if (!Modernizr.history) {
3) For some reason jQuery has stopped working too.
Here's my tree:
resources
- CSS
- js
- controllers
- MainController.js
- libs
- angular.js
- jquery.js
- require.js
- mondernizr.js
......
......
......
main.js
app.js
pages
test.html
main.js
(function(require) {
'use strict';
require.config({
baseUrl: '/resources/js',
paths: {
'jquery' : 'libs/jquery',
'angular' : 'libs/angular',
'router' : 'libs/page',
'history' : 'libs/history.iegte8',
'event' : 'libs/eventemitter2'
},
shim: {
'zepto' : { exports: '$' },
'angular' : { exports : 'angular' },
'router' : { exports: 'page'}
}
});
require([
'controllers/MainController'
]);
})(this.require);
app.js
define(['angular'], function(angular) {
return angular.module('MyApp', []);
})
MainController.js
require(['app'], function(app) {
app.controller('MainController', function() {
this.message = "Hello World";
})
});
test.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>AngularJS Test</title>
</head>
<body>
<div ng-controller="MainController as main">
{{ main.message }}
</div>
<script src="/resources/js/libs/require.js" data-main="/resources/js/main"></script>
</body>
</html>
Using AngularJS v1.2.16
Any help appreciated.
UPDATE ******************************************
Have added <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.js"></script> to my test.html page and the Error: [$injector... error has disappeared.
Only error now showing is:
TypeError: Modernizr is undefined
if (!Modernizr.history) {
Followed advice on here: http://activeintelligence.org/blog/archive/error-injectornomod-module-ngroute-is-not-available/
