I have app.js file with the following config:
require.config({
paths: {
// vendors
'angular': 'vendor/angular',
'ngResource': 'vendor/angular-resource.min',
'ngRoute': 'vendor/angular-route.min',
'ngAnimate': 'vendor/angular-animate.min'
},
shim: {
ngAnimate: {
deps: ['angular']
},
angular: {
deps: [],
exports: 'angular'
},
ngRoute: {
deps: ['angular']
},
ngResource: {
deps: ['angular']
}
},
baseUrl: 'scripts'
});
Now i'm trying to instantiate angular trough require:
define("app", ["angular", "ngResource"], function (angular) {
var app = angular.module("app", ["ngResource"]);
// you can do some more stuff here like calling app.factory()...
return app;
});
But it throws out:
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.
I'm following this guide step-by-step.
What am i doing wrong here?
Related
Really don't understand how to load third party libraries using Require.js in Angular.js project
For example 'topojson' is defined, but 'datamap' is undefined in this case.
Datamap from here https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js
Topojson from here https://github.com/mbostock/topojson/blob/master/topojson.js
Angular app.js:
'use strict';
requirejs.config({
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-route': ['../lib/angular-route/angular-route'],
'angular-resource': ['../lib/angular-resource/angular-resource'],
'angular-animate': ['../lib/angular-animate/angular-animate'],
'datamap':['../app/dense/world-view/datamaps.world'],
'topojson':['../app/dense/world-view/topojson'],
'lodash': ['../lib/lodash/lodash'],
'd3': ['../lib/d3js/d3']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
deps: ['angular'],
exports: 'angular'
},
'angular-resource': {
deps: ['angular'],
exports: 'angular'
},
'angular-animate': {
deps: ['angular'],
exports: 'angular'
},
'd3': {
exports: 'd3'
},
'topojson': {
deps: ['d3'],
exports: 'topojson'
},
'datamaps': {
deps: ['d3', 'topojson'],
exports: 'datamaps'
},
'lodash': {
exports: 'lodash'
}
}
});
require(
[
'angular',
'topojson',
'datamap',
'angular-route',
'angular-resource',
'angular-animate',
'lodash',
'd3'
],
function (angular, topojson, datamap) {
console.log("topojson", topojson);
console.log("datamap", datamap); // is undefined
angular.module('myApp', [
'myApp.graph',
'myApp.node',
'myApp.dense',
'ngAnimate',
'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.otherwise({
redirectTo: '/login'
});
})
;
angular.bootstrap(document.getElementById("myAppId"), ['myApp']);
});
Some of the Angular controllers:
'use strict';
define(['angular'], function (angular) {
angular
.module('myApp.dense', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/dense', {
templateUrl: 'assets/app/dense/dense.html',
controller: 'DenseCtrl'
});
}])
.controller('DenseCtrl', function ($scope) {
var map = new Datamap({
scope: 'world',
element: document.getElementById("someId"),
projection: 'mercator',
height: 500,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
}
});
})
;
});
In my angular controller new Datamap(...) says 'ReferenceError: Datamap is not defined'
This is not the only case.
Same for most external JS libraries.
I am running Angular project on top of Scala and SBT with WebJars, so Require.js is the only way how to load all that stuff.
I don't see any imports except for angular in your RequireJS module (the second snippet in your question). You need to add your other dependencies, such as datamap, etc.
Looks like in 'Datamap' object does not initialize, line 12535:
https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js#L12535
// expose library
if (typeof exports === 'object') {
d3 = require('d3');
topojson = require('topojson');
module.exports = Datamap;
}
else if ( typeof define === "function" && define.amd ) {
define( "datamaps", ["require", "d3", "topojson"], function(require) {
d3 = require('d3');
topojson = require('topojson');
return Datamap;
});
// window.Datamap = window.Datamaps = Datamap; // hack
}
else {
window.Datamap = window.Datamaps = Datamap;
}
Now it works for me.
Added that line after define:
window.Datamap = window.Datamaps = Datamap; // hack
and used require block inside Angular controller:
requirejs(["datamaps"], function () {
// draw map here new Datamap({...})
};
I am tring to insert angular route in an angular project which has also a requiredjs.
app.js looks like this:
requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app',
jquery: 'jquery-2.1.3.min',
angular: 'angular',
route: 'angular-route'
},
shim: {
'jquery': {
exports: '$'
},
'angular': {
exports: 'angular'
},
'route': {
deps: ['angular'],
exports: 'route'
}
}
});
// Start loading the main app file. Put all of
// your application logic in there.
requirejs(['app/main']);
main.js looks like this:
define(['route', "angular", 'app/navController'], function (route, angular, navController) {
var app = angular.module('mainFrameModule', 'ngRoute');
app.controller('navController', navController);
});
when I try to run the web site i get the follwing error described in:
https://docs.angularjs.org/error/$injector/nomod?p0=mainFrameModule
And when I debug the main.js, route is undefined.
can anyone help me to solve this problem?
thanks in advance
kobi
You don't need exports option for either angular or ngRoute. Try this shim config
shim: {
'jquery': {
exports: '$'
},
'route': ['angular']
}
and your main.js
define(['angular', 'app/navController', 'route'], function (angular, navController) {
var app = angular.module('mainFrameModule', 'ngRoute');
app.controller('navController', navController);
});
I'm trying to use ng-polymer-elements with angular and requirejs. I did follow this instructions https://github.com/GabiAxel/ng-polymer-elements and I had not success. When I do remove the instance "ng-polymer-elements" from my requires at the "main.js" everything works correctly. Someone can help me,please? thanks.
A little issue part:
Uncaught Error: [$injector:modulerr] Failed to instantiate module Coderup due to:
Error: [$injector:nomod] Module 'Coderup' 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.
main.js
require.config({
paths: {
angular: '../bower_components/angular/angular',
'angular-animate': '../bower_components/angular-animate/angular-animate',
'angular-cookies': '../bower_components/angular-cookies/angular-cookies',
'angular-mocks': '../bower_components/angular-mocks/angular-mocks',
'angular-resource': '../bower_components/angular-resource/angular-resource',
'angular-sanitize': '../bower_components/angular-sanitize/angular-sanitize',
'angular-scenario': '../bower_components/angular-scenario/angular-scenario',
'angular-touch': '../bower_components/angular-touch/angular-touch',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
'ng-polymer-elements' : '../bower_components/ng-polymer-elements/ng-polymer-elements.min',
platform : '../bower_components/platform/platform',
'uiRouter' : '../bower_components/angular-ui-router/release/angular-ui-router',
jquery : '../bower_components/jquery/dist/jquery.min'
},
shim: {
angular: {
deps: ['platform'],
exports: 'angular'
},
platform : {
exports : 'platform'
},
jquery : {
exports: 'jquery'
},
'ng-polymer-elements' : [
'angular'
],
'uiRouter': [
'angular'
],
'angular-cookies': [
'angular'
],
'angular-sanitize': [
'angular'
],
'angular-resource': [
'angular'
],
'angular-animate': [
'angular'
],
'angular-touch': [
'angular'
],
'angular-mocks': {
deps: [
'angular'
],
exports: 'angular.mock'
}
},
priority: [
'angular'
],
packages: [
]
});
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'uiRouter',
'ng-polymer-elements',
'controllers/config',
'directives/config'
], function(angular,app) {
'use strict';
/* jshint ignore:start */
var $html = angular.element(document.getElementsByTagName('html')[0]);
/* jshint ignore:end */
angular.element().ready(function() {
angular.bootstrap(document, [app.name]);
});
});
app.js
define(['angular', 'uiRouter' ,'ng-polymer-elements'], function (angular) {
'use strict';
var app = angular.module('Coderup', ['ui.router','ng-polymer-elements', 'appControllers', 'appDirectives'])
.config(function ($stateProvider, $urlRouterProvider) {
var dirView = "../views/";
$urlRouterProvider.otherwise("/learn");
$stateProvider
.state('learn', {
url: "",
controller: 'DadController'
})
.state('route1', {
url: "/route1",
views: {
"container": {
templateUrl: dirView + "teste.html"
}
}
});
});
return app
});
The issue:
Uncaught Error: [$injector:modulerr] Failed to instantiate module Coderup due to:
Error: [$injector:nomod] Module 'Coderup' 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.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=Coderup
at http://localhost:9000/bower_components/angular/angular.js:80:12
at http://localhost:9000/bower_components/angular/angular.js:1797:17
at ensure (http://localhost:9000/bower_components/angular/angular.js:1721:38)
at module (http://localhost:9000/bower_components/angular/angular.js:1795:14)
at http://localhost:9000/bower_components/angular/angular.js:4064:22
at forEach (http://localhost:9000/bower_components/angular/angular.js:335:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4048:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:3974:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1484:20)
at Object.bootstrap (http://localhost:9000/bower_components/angular/angular.js:1505:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=Coderup&p1=Error%3A…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1505%3A12)
Guys please, help me to resolve it. You can get this project by git.
git clone https://vcrzy#bitbucket.org/vcrzy/coderup.git
npm install
run mongod
cd /app
node app.js
go http://localhost:9000
You probably have an issue with files loading order. You need to shim your app, with all dependencies, add something along these lines to the shim section:
app: [
'angular',
'ng-polymer-elements',
...
// list all other deps
]
The best way to troubleshoot this issue is to watch the Network tab and see the sequence of how files are being loaded, and make sure they load in the right order.
I am trying to implement angularjs with requirejs
Here is my applicaiton.js file which loads initially
var config = {
baseUrl: '/assets/',
paths: {
jquery: 'jquery',
twitter: 'twitter',
angular: 'angular',
angularjs: 'angularjs', # This is the directory
app: 'app'
},
shim: {
'twitter/bootstrap': {
deps: ['jquery']
},
'angular': {
exports: 'angular'
},
'app': {
deps: ['jquery']
}
}
}
requirejs.config(config);
requirejs(['jquery', 'twitter/bootstrap', 'angularjs/app', 'app/common']);
Directory structure
Application.js
Angularjs/
-controllers/
-directives/
-Services/
-app.js
As startup angularjs/app.js will be initiated and my app.js contains
define('app', ['angular'], function(angular) {
var app = angular.module('app', []);
return app;
})
require(['app'], function(app) {
app.controller('FirstController', function($scope) {
$scope.message = 'hello';
})
})
While running getting the exception as
Failed to instantiate module app
Used this as reference link
That's not a healthy way to use RequireJS aside from the fact that does not work. Please refer to my answer regarding using RequireJS with AngularJS: Does it make sense to use Require.js with Angular.js?
Hi all Im trying to load backbone and backbone-relational in require js every time I just require 'backbone', this is my code:
main.js:
requirejs.config({
paths: {
'domReady': 'lib/require/domReady',
'text': 'lib/require/text',
'jquery': 'lib/jquery/jquery',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone/loader',
'relational': 'lib/backbone/relational',
'iosync': 'lib/backbone/iosync',
'iobind': 'lib/backbone/iobind'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'relational': {
deps: ['backbone']
},
'iobind': {
deps: ['backbone']
},
'iosync': {
deps: ['backbone']
}
}
});
require([
'domReady!',
'jquery',
'backbone',
'models/application',
'views/application'
], function () {
// start the app
var applicationModel = new BACON.models.Application();
var applicationView = new BACON.views.Application({
el: $('body'),
model: applicationModel
});
});
and lib/backbone/loader.js:
define([
'lib/backbone/backbone',
'relational',
'iobind',
'iosync'
]);
but running my app on chrome gives me:
Uncaught Error: Load timeout for modules: relational,iobind,iosync
So it seems i have a dependency loop... Is there a way to make this work or is there another way to accomplish this??
In your shim config you added a depedency for relational to backbone, which refer to libs/backbone/loader, and this generate a loop while loading lib/backbone/loader.js.
You should change your path config for backbone to 'lib/backbone/backbone' and add another named path for the loader if you want.