Im trying to add AngularJS to my web application which already makes use of RequireJS. When loading my test page, i am seeing:
1) Error: No module: MyApp
...),factory:a("$provide","factory"),service:a("$provide","service"),value:a("$prov...
2) TypeError: Modernizr is undefined
if (!Modernizr.history) {
I am using AngularJS v1.1.5
Here's my tree:
resources
- CSS
- js
- controllers
- MainController.js
- libs
- angular.js
- jquery.js
- require.js
- mondernizr.js
......
......
......
main.js
mainApp.js
pages
test.html
main.js
(function(require) {
'use strict';
require.config({
baseUrl: '/resources/js',
paths: {
'zepto' : 'libs/zepto',
'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'},
'modernizr' : { exports: 'Modernizr' }
}
});
require([ 'jquery', 'angular', 'routes', 'modernizr', 'event' ], function($, angular, routes, Modernizr, Event) {
function bootstrap() {
var app = new Event(),
router = routes(app);
if (typeof console !== 'undefined') console.info('>> module routes loaded ... executing router');
router({ click: false, popstate: false });
if (typeof console !== 'undefined') console.info('>> executed router');
}
$(function() {
if (!Modernizr.history) {
require([ 'history' ], bootstrap);
require([ 'controllers/MainController' ], bootstrap);
} else {
require([ 'controllers/MainController' ], bootstrap);
bootstrap();
}
});
});
})(this.require);
mainApp.js
define(['angular'], function(angular) {
return angular.module('MyApp', []);
})
MainController.js
require(['mainApp'], function(mainApp) {
mainApp.controller('MainController', function($scope) {
$scope.data = {message: "Hello"};
})
});
test.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="/assets/js/vendor/require.js" data-main="/assets/js/main"></script>
</head>
<body>
<div ng-controller="MainController">
{{ data.message + " world" }}
</div>
</body>
</html>
Any help appreciated.
The No module: MyApp problem is causes by the Angular automatic initialization: <html ng-app="MyApp">. Angular loads before mainApp.js, sees the ng-app and tries to find a module which is not (yet) there.
The solution is to manually bootstrap Angular from within main.js and inside the document load event, as described here.
I am not sure about the problem with Modernizr; I guess you are NOT loading it at all. RequireJs is not complaining because of the shim. How are you loading it? It is not included in your paths configuration. You may want to load Modernizr as independent script before all other scripts (as per recommendations), in which case no paths configuration is needed and the shim is enough.
Related
I'm trying to setup a require js project for learning purposes. I need to run a Backbone app.
Index.html, looks plain and simple:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>RequireJS - Test drive</title>
<!-- data-main attribute tells require.js to load scripts/main.js after
require.js loads. -->
<script data-main="js/main" src="js/vendor/require.js"></script>
</head>
<body>
<h1>RequireJS - Test drive</h1>
</body>
</html>
Currently I have this config in my main.js: (which is the entry point in index.html for requirejs)
require.config({
paths: {
underscore: 'vendor/underscore-1.9.1.min',
jquery: 'vendor/jquery-3.4.1.min',
backbone: 'vendor/backbone-1.4.0.min',
app: 'app/app',
userModel: 'app/models/user.model',
userListView: 'app/views/user-list.view',
userSingleView: 'app/views/user-single.view',
},
bundles: {
'models': ['userModel']
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
}
},
});
// Start the app
define(['app'], (App) => {
return App.initialize();
});
In app.js, which I try to initiate the app with, I have the following:
define(['backbone'], (Backbone) => {
const initialize = () => {
console.log('App initialized.', Backbone);
const data = {title: 'title'};
const view = 0; // new View here....
};
return {
initialize: initialize
}
});
Now, if I remove backbone as a dependency, I am able to see the console.log message in the browser. If I leave it there, then the console throws this error:
require.js:5 GET http://127.0.0.1:8080/js/js/vendor/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not
Found)
require.js:5 Uncaught Error: Script error for "js/vendor/jquery-3.4.1.min", needed by: backbone
https://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)
Inspecting the network tab, I can see that the jQuery dependency has errored out, and for some reason an additional /js has been added to the path, which results in a 404 error for jQuery, but only when I try to use Backbone on the app.js file.
Path looks like this, with the additional /js added to it:
http://127.0.0.1:8080/js/js/vendor/jquery-3.4.1.min.js
What is it that I am missing in the configuration/setup of the application?
I believe you should set baseUrl in your config
require.config({
baseUrl: '/js'
});
I get undefined in the following code when trying to load via require.js
HTML
<script data-main="application/main" src="http://requirejs.org/docs/release/2.1.14/minified/require.js"></script>
main.js
require.config({
baseUrl: "application",
paths: {
angular: 'https://code.angularjs.org/1.4.5/angular',
angularRoute: 'https://code.angularjs.org/1.4.5/angular-route'
},
shim: {
angular: {exports: 'angular' } ,
angularRoute: { deps: ['angular'], exports: 'angularRoute' },
}
});
require(['app', 'routesBoot'], function (app) {
app.init();
});
app.js
define(['angular'], function (angular) {
var app = angular.module('reporterdashboard', []);
app.init = function () {
console.log('app.init called');
angular.bootstrap(document, ['reporterdashboard']);
};
return app;
});
routesBoot.js
require(['app', 'angularRoute'], function (app, angularRouterParam) {
//put my routes in here, using angularRouterParam
//but angularRouterParam = undefined
return app.config(function (angularRouterParam) {
angularRouterParam.when('/page2', { controller: 'Page2Controller', templateUrl: 'page2.html' });
});
});
When I inspect angularRouterParam passed into routesBoot it's undefined. What have I done wrong ?
I'm basically trying to split my app and therefore, placing my routes in their own file (controllers, directives etc will live in their own boot .js files). I'm letting require.js look after all my .js file loading as can be seen in main.js.
The code in routesBoot is not syntactically correct at the moment as I'm stuck with the problem of an undefined angularRouterParam
The problem was out side of the code I've posted here. I was loading a directive first into the index.html (View First). This directive was loading other dependencies. The project is quite large, some 40 .js files. My restructuring with require was at fault.
I am trying to use require.js with Main.js and getting following error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=MyApp&p1=Error%3…3A8080%2FResults%2Fresources%2Fjs%2Fvendor%2Fangular.min.js%3A31%3A252)
My Main.js
require.config({
// alias libraries paths
paths: {
'angular': 'vendor/angular.min',
'jquery': 'vendor/jquery-1.8.0-min',
'angularroute': 'vendor/angular-route'
},
// angular does not support AMD out of the box, put it in a shim
shim: {
'angular': {
deps: ['jquery'],
exports: 'angular'
},
'angularroute':{
deps:['angular']
}
}
});
require([
'angular',
'angularroute',
'app'
],
function(angular, angularroute, app){
'use strict';
})
My app.js
define(['angular'], function(angular){
return angular.module('MyApp',['ngRoute']);
});
I got an error that said I need to add angularroute to my app but I still get this error. Can anyone point me to what i might be doing wrong?
I found a solution here: https://github.com/tnajdek/angular-requirejs-seed/blob/master/app/js/main.js
from the docs:
http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = "NG_DEFER_BOOTSTRAP!";
require(['angular', 'angularroute', 'app'], function(angular, angularroute, app){
'use strict';
//after you are done defining / augmenting 'MyApp' run this:
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
})
Here is my require config, at require_config.js:
var require = {
baseUrl: '/js',
paths: {
'angular': 'lib/angular.min',
'angular.route': 'lib/angular-route.min',
'angular.resource': 'lib/angular-resource.min',
'angular.animate': 'lib/angular-animate.min',
'angular.ui.bootstrap': 'lib/ui-bootstrap-tpls-0.6.0.min',
'angular.upload': 'lib/ng-upload.min',
'jquery': 'lib/jquery-1.10.2.min'
},
shim: {
'angular': ['jquery'],
'angular.route': ['angular'],
'angular.resource': ['angular'],
'angular.animate': ['angular'],
'angular.ui.bootstrap': ['angular'],
'angular.upload': ['angular'],
'my.angular': ['angular', 'angular.route', 'angular.resource', 'angular.animate', 'angular.ui.bootstrap', 'angular.upload']
}
};
My script tags at HTML <head>:
<script src="/js/require-config.js"></script>
<script src="/js/lib/require.js"></script>
The pages that come from server-side MAY make usage of Angular, or jQuery, both, or none... so, the HTML markup may contain a single simple tag to eventually activate the whole Angular structure, like this:
<script>require(['myApp']);</script>
Now, at myApp.js, I just depend on my.angular, which takes care of loading everything else... in fact, I have other flavours of "my.angular", with different subsets, which I use in different contexts of the site:
define(['my.angular'], function() {
var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngAnimate', 'ngUpload', 'ui.bootstrap']);
// more app module stuff here, including bootstrap
return myApp;
});
angular is defined as a global variable and your declaration is overriding it. The file angular.js does not return anything so there is nothing to inject at the RequireJS level. Try the following:
define(['angular'], function(){
return angular.module('MyApp',['ngRoute']);
});
I was struggling with RequireJS and AngularJS so I created angularAMD to help me:
http://marcoslin.github.io/angularAMD/
Your setup looks fine, except you need to add angularroute as a dependency in the define portion of the app.js file. You mentioned this, but didn't reflect this in your sample code.
define(['angular', 'angularroute'], function(angular){
return angular.module('MyApp',['ngRoute']);
});
I am new to angularjs
I am trying to integrate angularjs with requirejs . How ever I am getting the error
Uncaught Error: No module: app
This is my setup
main.coffee
require.config
baseUrl : "/Scripts/"
paths :
jquery : 'libs/jquery/jquery-2.0.3'
angular : 'libs/angular/angular'
'angular-resource' : 'libs/angular/angular-resource'
bootstrap : 'libs/bootstrap/bootstrap'
shim :
angular :
exports :'angular'
'angular-resource':
deps :['angular']
jquery :
exports: ['jquery']
bootstrap :
deps :['jquery']
app:
deps :['app-boot']
require ['app-angular/modules/app','app-angular/modules/app-boot'], ($,angular)->
app-boot.coffee
require ['jquery','angular','bootstrap'], ($,angular)->
$(document).ready ->
angular.bootstrap document,['app']
app.coffee
define "app",['angular','angular-resource'], (angular)->
angular.module 'app',['ngResource']
StudentController.coffee
require ["app"] , (app) ->
app.controller "StudentController" , ($scope) ->
$scope.msg = "Hello Joy !! How are you !! You are in Angularjs"
And my Index.cshtml
<div class="page-content">
<div ng-controller="StudentController">
<p ng-bind="{{msg}}">
</p>
</div>
However it gives the error Uncaught Error: No module: app
I also removed the ng-app from html also have bootstrapped the angular manually on domready . So where am I going wrong ?
I think that you need to invert the dependency on this bit of code:
app:
deps :['app-boot']
It's the way around:
'app-boot': {
deps: ['app']
}
Your app-boot.coffee file depends on the module app that is defined on the app.coffee file
Looks like you're following this guide, which is double plus good.
I was able to get it to work but kept getting the same error message because in my Angular controller, 'app' was not defined. It appears the 'app.controller' doesn't get set there, as the guide states, and just loading it via the 'require' statement is sufficient.':
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']
This is only a little different than yours.
/* shim */
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"angular":{
exports:"angular"
},
"directives":{/* this is my custom Angular directive */
deps:["angular"]
}
}
});
/* RequireJS module */
define("app", ["angular", "directives"], function(angular)
{
var app = angular.module("app", ["zipppyModule"]);
angular.element(document).ready(function()
{ angular.bootstrap(document,['zippyModule']); });
});
/* 'app' loads the module */
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']
The setup below is the only way I can get backbone to ply nice with requirejs - is there a cleaner way? without having to specify the entire path to backbone everytime?
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href='<c:url value="/resources/css/bootstrap.min.css"/>'
rel="stylesheet" type="text/css" />
<script data-main="resources/js/main.js" src="resources/js/lib/require.js"></script>
</head>
<body>
<ul class="nav">
<li >Home</li>
<li>Rentals
<li>Films</li>
</ul>
</body>
</html>
main.js
require.config({
baseUrl : '/sakila/resources/js',
paths : {
jquery : 'lib/jquery-1.8.3.min',
underscore : 'lib/underscore-min',
jqueryui : 'lib/jquery-ui-1.9.2.custom.min'
},
shim : {
'/sakila/resources/js/lib/backbone-min.js' : {
deps : [ 'underscore', 'jquery' ],
exports : 'Backbone'
}
}
});
require([ 'router' ], function(Router) {
Router.initialize();
});
router.js
define(['underscore','jquery','/sakila/resources/js/lib/backbone-min.js'],function(_,$,Backbone){
var AppRouter = Backbone.Router.extend({
routes : {
'home' : 'home',
'films' : 'films',
'rentals' : 'rentals',
'*actions' : 'home', // default action
'':'home'
},
home:function(){
console.log('Routed to home');
},
films:function(){
console.log('Routed to films');
},
rentals:function(){
console.log('Routed to rentals');
},
});
initialize = function() {
var app_router = new AppRouter();
Backbone.history.start();
console.log('history started');
};
return {initialize:initialize};
});
You can create an alias for Backbone in the paths of your requirejs configuration and use that alias in your shims. Also, you don't need to specify the full path for backbone as it respects the baseUrl option in your configuration.
require.config({
baseUrl : '/sakila/resources/js',
paths : {
jquery : 'lib/jquery-1.8.3.min',
underscore : 'lib/underscore-min',
jqueryui : 'lib/jquery-ui-1.9.2.custom.min',
backbone : 'lib/backbone-min'
},
shim : {
backbone : {
deps : [ 'underscore', 'jquery' ],
exports : 'Backbone'
}
}
});
And then use it cleanly elsewhere.
define(['underscore','jquery','backbone'],function(_,$,Backbone){
})
The following post describes how to use Require.js with Backbone.js. It covers 2 different ways of integrating Backbone.js with Require.js that includes shims and AMD compliant backbone.js.
Personally, I would rather use the AMD compliant version of Backbone.js and undescore.js. It makes the configuration a little cleaner and will load the modules in parallel. The folloing blog post describes this option.
Re-Learning Backbone.js – Require.js and AMD