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/
I went over to Modernizr's site and checked the code. I see that it does not call define to define itself as a module so Modernizr is not AMD-compliant and you need a shim for it to tell RequireJS what the module value should be:
shim: {
...
modernizr: { exports: 'Modernizr' }
}
Related
This question already has answers here:
AngularJS cannot find module with latest RequireJS
(2 answers)
Closed 6 years ago.
Actually I have been trying to develop a single page application using requirejs and angularjs. I have loaded all files that are necessary,while running the app without any other angular apps and without dependencies everything works fine,but when I call the requirejs definedjs files to load within the define() in app.js the application throws the following error,
[$injector:nomod] Module 'app' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
Here is my html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advances in Central Science</title>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Requirejs -->
<script data-main="client/js/main" src="client/bower_libs/requirejs/require.js"></script>
</head>
<body>
<div ng-controller="mainCtrl">
<h1>{{message}}</h1>
<button class="btn btn-success">Success</button>
</div>
</body>
</html>
My Requirejs
// requirejs
require.config({
baseUrl: '/',
paths: {
// Aliases and paths of modules
'angular': 'client/bower_libs/angular/angular',
'uiRouter': 'client/bower_libs/angular-ui-router/release/angular-ui-router.min',
'bootstrap': 'client/bower_libs/bootstrap/dist/js/bootstrap.min',
'jquery': 'client/bower_libs/jquery/dist/jquery.min',
// paths
'app': 'client/js/app',
'includesjs': 'client/js/includesjs',
'includescss': 'client/js/includescss',
'modules': 'client/js/controllers/main'
},
map: {
// Maps
'*': {
'css': 'client/bower_libs/require-css/css.min.js'
}
},
shim: {
// Modules and their dependent modules
'angular': { exports: 'angular' },
'uiRouter': { deps: ['angular'] },
'bootstrap': { deps: ['jquery'] }
},
// kick start application
deps: ['client/js/initialize']
});
Initialize.js
define(['app', 'includesjs'], function() {
return true;
})
app.js(I cant get what I am doing wrong here)
=========working
define(['angular'], function(angular) {
var app = angular.module('app', []);
return app;
=========not Working
define(['angular','uiRouter'], function(angular) {
var app = angular.module('app', ['ui.router']);
return app;
});
includes.js
define([
'modules/mainCtrl'
], function() {
return true;
});
mainController.js
define(['app'], function(app) {
app.controller('mainCtrl', function($scope) {
$scope.message = "Hello,the page works like a charm";
})
});
I think you only need to define the uiRouter while defining the angular.
Try something like this.
define(['angular'], function(angular) {
var app = angular.module('app', ['ui.router']);
return app;
Its because you only need to define the dependencies on module level. Not on angular framework level. Hope that solves your issue
I am currently working on a Angualar JS project based on angularAMD.
Link: http://marcoslin.github.io/angularAMD/#/home
Here we include only the necessary dependent files in needed by the controllers and not all the files.
eg.
define(['angularAMD', 'common/services/service1', 'module1/services/service2',], function (angularAMD) {
'use strict';
angularAMD.controller('abcController', function ($scope, service1, service2) {
// controller code goes here
}
I have tried Grunt Hashing but
Grunt provides hashing but the location of the hashed files changes.
This does not change the path of the files inside individual controller as a result the application fails to run. i.e service1, service2
Question
I was wondering if there was a way to hash the files when we include a new files?
Is there any other way to solve this problem?
Thanks in Advance
how do u set up your modules. Your main.js may look like this
'use strict';
require.config({
waitSeconds: 0,
urlArgs: "bust=v1.0.0",
paths: {
bootstrap: 'Scripts/bootstrap.min',
jquery: 'Scripts/jquery-1.10.2.min',
angular: 'Scripts/angular.min',
angularRoute: 'Scripts/angular-route.min',
angularAMD: 'Scripts/angularAMD.min',
app: 'ngApp/app',
appConfig: 'ngApp/app.config',
/*register Services - Start*/
service1: 'ngServices/Common/service1',
service2: 'ngServices/module/service2',
/*register Services - End*/
/*register Filters - Start*/
/*register Filters - End*/
/*register Controllers - Start*/
/*register Controllers - End*/
},
// specifying library dependencies
shim: {
'bootstrap':{ deps:['jquery']},
'angular': { deps: ['jquery'], exports: 'angular' },
'angularRoute': { deps: ['angular'] },
'angularAMD': { deps: ['angular'] }
},
// define application bootstrap
deps: ['app']
});
and in your index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-ng-controller="appController as appCtrl" ng-cloak>
<div >
<ng-view></ng-view>
</div>
</div>
<script data-main="main" src="Scripts/require.js"></script>
</body>
</html>
and in your controllers
'use strict';
define(['angularAMD', 'service1', 'service2'],
function (angularAMD) {
angularAMD.controller('abcController', ['service1', 'service2',
function (service1, service1) {
var self = this,
// your code
}]);
});
I am trying to make a sample application using angularjs, ui-router and requirejs to lazyload my controllers. It works good locally but I want to write requirejs optimizer for production environment, Tried using grunt:requirejs tool for this but it didnt work for me. It doesnt even give any script loading error or something..
<--index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
<head>
</head>
<body class="no-padding">
<div data-ui-view="header"></div>
<div data-ui-view="module"></div>
<script data-main="app/main" src="bower_components/requirejs/require.js"></script>
</body>
</html>
//main.js
require.config({
baseUrl: "",
// Paths for just the core application and its controllers/factories/services
paths: {
"jquery": "bower_components/jquery/dist/jquery",
"angular": "bower_components/angular/angular.min",
"angular-ui-router": "bower_components/angular-ui-router/release/angular-ui-router.min",
"app": "app/app",
"underscore": "node_modules/underscore/underscore-min",
},
shim: {
//Tell requirejs to pipe in angular"s return variable as "angular"
"angular": {
exports: "angular"
},
},
// Say we have a dep on App, so it gets loaded
deps: ["app", 'lib']
});
//lib.js
define([
'jquery',
'underscore',
], function($){
});
//app.js
define([
'angular',
'angular-ui-router'
], function(){
var app = angular.module('app', ['ui.router']);
//lazy loading
var loadController = function(path){
return ['$q', function($q){
var defered = $q.defer();
require([path], function(){
defered.resolve();
});
return defered.promise;
}]
};
app.config(['$controllerProvider', function($controllerProvider){
app.registerController = $controllerProvider.register;
}]);
app.config(['$stateProvider', function($stateProvider){
//registering controller
// defining states
$stateProvider.state('app', {
url: '/',
views: {
'header':{
templateUrl:"<div>{{title}}</div>",
controller:"appCtrl"
},
'module':{
template:"<div>{{title}}</div>",
controller:"homeCtrl"
}
},
resolve: {
loadApp: loadController('../app/controllers/header'),
loadHome: loadController('../app/controllers/home')
}
});
}]);
angular.bootstrap(document, ['app']);
return app;
});
//home.js
define(function(){
angular.module('app').registerController('homeCtrl', ['$scope', '$state', function($scope,$state){
$scope.title = 'CONTENT';
}]);
});
//header.js
define(function(){
angular.module('app').registerController('appCtrl', ['$scope', '$state', function($scope,$state){
$scope.title = 'HEADER';
}]);
});
I was using grunt:requirejs task to compile an optimized dist file "main.js" and grunt copy for modified index.html inside dist directory:
grunt:requirejs and modified index.html -->
grunt.initConfig({
//...
requirejs: {
compile: {
options: {
name: 'node_modules/almond/almond',
mainConfigFile: 'app/main.js',
out: 'dist/main_opt.js',
baseUrl: './'
}
}
},
//...
})
<--dist/index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
<head>
</head>
<body class="no-padding">
<div data-ui-view="header"></div>
<div data-ui-view="module"></div>
<script src='bower_components/requirejs/require.js'></script>
<script>
require.config({
paths: {
//Comment out this line to go back to loading
//the non-optimized main.js source file.
"main_opt": "dist/main_opt"
}
});
require(["main_opt"]);
</script>
</body>
</html>
When loading dist/index.html it gives me nothing, no error in browser, just doesnt work, if it was giving me script loading error for controllers it might have made any sense but its not. Completely clueless here..
There is nothing required in main.js file. You must require at least one of files declared in paths. Do it as follow:
require(['app'], function () {
console.log('app required successfully');
});
Put this lines of code in your main.js file. I hope it may help to find errors:
requirejs.onError = function (err) {
console.error('[require error] type: ', err.requireType, ' ,modules: ' + err.requireModules);
throw err;
};
I keep getting:
Uncaught TypeError: object is not a function
The first time:
<script>
require(['core/controller']);
</script>
The secondoccurrence is:
require.config({
paths: {
"jquery": [
"jquery"
],
'bootstrap': [
'bootstrap'
],
'kendo': [
'kendo'
],
handlebars: 'handlebars'
},
shim: {
"bootstrap": {
deps :["jquery"]
},
"kendo": {
deps: ["jquery"]
}
}
})
define('config', function (require) {
'use strict';
var module = require('module');
return module.config ? module.config() : {};
});
define('events', ['core/mini-events'], function(EventEmitter){
var events = new EventEmitter();
return events;
});
In my header I have:
<script data-main="/js/main.js" src="http://mbms.com/js/requirejs.js"></script>
<script data-main="/js/main.js" src="http://mbms.com/js/requirejs.js"></script>
The absolute URL that you mentioned in your script's src doesn't exist. As the host and the file do not exist, requirejs.js is not downloaded and any attempt to use require API will give you the error that you're getting now. As you're running this locally, I suggest you change your src like below
<script data-main="/js/main.js" src="/js/requirejs.js"></script>
As long as there's a js folder with requirejs.js file under your project root folder, then this change should work :)
[EDIT for clarity]
I tried the URL referenced in the script tag just now and it's not present. Check your debugger's Network console and you'll see the 404. Perhaps you meant:
http://requirejs.org/docs/release/2.1.16/minified/require.js
My structure looks like so:
index.html
main.js #holds the configs.path and configs.shim
libs
jquery.js
require.js
backbone.js
underscore.js
modules
app
main.js #want to load in ./views/app.js here
views
app.js
so in /modules/app/main.js, I want to load in the /modules/app/views/app.js but having problem
Here is /modules/app/main.js
define(['views/app'],function(App){
console.log('app main')
//var app = new App();
})
The console error message I get is Get failed with path GitProjects/GameApp/views/app.js
How do I get it to load relatively inside modules?
here is ./main.js the file that holds the configs
require.config({
paths: {
jquery: './libs/jquery-2.0.3',
underscore: './libs/underscore',
backbone: './libs/backbone'
},
shim: {
"underscore": {
exports: '_'
},
"backbone": {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
and here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stop Game App</title>
<script src="./libs/require.js" data-main='./main'></script>
</head>
<body>
<div id="app"></div>
<script>
require(['./modules/app/main'],function(){
console.log('main')
})
</script>
</body>
</html>
You just need to set the path to "./" and be relative. That's all there is to it.