Develop Reference

AngularAMD cannot read property 'bootstrap' of undefined

I'm trying to set up my angularjs app using AngularAMD (a Requirejs implementation with AngularJs), but sometimes i get
Cannot read property 'bootstrap' of undefined(…)
main.js
require.config({
paths: {
//Angular
'angular': '/bower_components/angular/angular',
'angular-route': '/bower_components/angular-route/angular-route.min',
'angularAMD': '/bower_components/angularAMD/angularAMD.min',
'angular-slick': '/bower_components/angular-slick/dist/slick.min',
'angular-sanitize': '/bower_components/angular-sanitize/angular-sanitize',
//Plugins
'jquery': '/bower_components/jquery/dist/jquery',
'materialize': '/bower_components/Materialize/dist/js/materialize.min',
'jquery-hammer': '/bower_components/Materialize/js/jquery.hammer',
'hammerjs': '/bower_components/Materialize/js/hammer.min',
'parallax': '/bower_components/parallax.js/parallax.min',
'slick': '/bower_components/slick-carousel/slick/slick.min',
'domReady': '/bower_components/requirejs/domReady',
//Controllers
'HomeController': 'Components/Home/home.controller',
},
shim: {
angular: {
exports: "angular",
},
'angular-route': ['angular'],
'angularAMD': ['angular'],
'angular-slick': ['angular', 'slick'],
'angular-sanitize': ['angular'],
'materialize': ['jquery', 'jquery-hammer', 'hammerjs'],
'parallax': ['jquery'],
},
baseUrl: "src",
deps: ['app']
});
});
app.js
define(['angularAMD', 'angular-route', 'angular-sanitize', 'angular-slick'], function(angularAMD) {
var app = angular.module("app", ['ngRoute', 'ngSanitize', 'slick']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/", angularAMD.route({
templateUrl: 'views/Home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}));
$locationProvider.html5Mode(true);
});
return angularAMD.bootstrap(app);
});
I've tried many differents ways, but none of them seems to work, what am i doing wrong?..
Note: it only happens sometimes, when the page loads..

Well since my last question was deleted, I was able to fix this issue. First: This maybe my neurosis, but add baseUrl before your paths array.
Second: (In your app.js), instead of
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/", angularAMD.route({
templateUrl: 'views/Home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}));
$locationProvider.html5Mode(true);
});
return angularAMD.bootstrap(app);
Do this:
var app = angular.module("app", ['ngRoute', 'ngSanitize', 'slick']);
app.init = function () {
angular.bootstrap(document, ['app']);
};
return app;
This will load it to the DOM. If you have several controllers do so like this.
require.config({
baseUrl: "src",
paths: {
//Angular
'angular': '/bower_components/angular/angular',
'angular-route': '/bower_components/angular-route/angular-route.min',
'angularAMD': '/bower_components/angularAMD/angularAMD.min',
'angular-slick': '/bower_components/angular-slick/dist/slick.min',
'angular-sanitize': '/bower_components/angular-sanitize/angular-sanitize',
//Plugins
'jquery': '/bower_components/jquery/dist/jquery',
'materialize': '/bower_components/Materialize/dist/js/materialize.min',
'jquery-hammer': '/bower_components/Materialize/js/jquery.hammer',
'hammerjs': '/bower_components/Materialize/js/hammer.min',
'parallax': '/bower_components/parallax.js/parallax.min',
'slick': '/bower_components/slick-carousel/slick/slick.min',
'domReady': '/bower_components/requirejs/domReady',
},
shim: {
jquery: { exports: '$' },
angular: {
exports: "angular",
},
'angular-route': {
deps: ['angular'],
exports: 'angular'
},
'angularAMD': {
deps: ['angular'],
exports: 'angular'
},
'angular-slick': ['angular', 'slick'],
'angular-sanitize': {
deps: ['angular'],
exports: 'angular'
},
'materialize': ['jquery', 'jquery-hammer', 'hammerjs'],
'parallax': ['jquery'],
},
deps: ['app']
});
require(['app', 'other_controller', 'other_controller'], function(app) {
app.init();
});
Lastly make sure, you do not have ng-app in your html.

How to setup Skrollr.js with AngularJS and RequireJS

I'm having difficulties setting up Skrollr using AngularJS & RequirejS.
Some articles suggested to set up Skrollr as a directive and that is the approach that I have been following. Unfortunately, Skrollr is not able to initialize. Specifically, when I try to call the skrollr.init() from the directive I get an error saying that skrollr is not defined.
Below is my code:
directives.js
define(['directivesFactory', 'skrollr'], function(directivesFactory){
directivesFactory.directive('skrollr', [function(){
var directiveDefinitionObject = {
link: function() {
skrollr.init();
}
};
return directiveDefinitionObject;
}]);
});
main.js
(function() {
'use strict';
require.config({
baseUrl: 'js',
paths: {
'angular': 'libs/angular-1.3.9',
'angularRoute': 'libs/angular-route-1.3.9',
'bootstrap': 'libs/modernizr-2.6.2-respond-1.1.0.min',
'jquery': 'libs/jquery-1.11.0.min',
'bootstrapJS': 'libs/bootstrap',
'jqueryElastislide': 'libs/jquery.elastislide',
'jqueryPpCustom' : 'libs/jquerypp.custom',
'modernizrCustom' : 'libs/modernizr.custom.17475',
'skrollr' : 'libs/skrollr.min'
},
shim: {
'angular': {
exports: 'angular'
},
'angularRoute': {
deps: ['angular']
},
'jquery': {
exports: '$'
},
'bootstrapJS': {
deps: ['jquery']
},
'jqueryElastislide':{
deps: ['jquery']
},
'jqueryPpCustom':{
deps: ['jquery']
},
'skrollr': {
exports: 'skrollr'
}
}
});
define('controllersFactory', ['angular'], function(angular) {
return angular.module('app.controllers', []);
});
define('servicesFactory', ['angular'], function(angular) {
return angular.module('app.services', []);
});
define('directivesFactory', ['angular'], function(angular) {
return angular.module('app.directives', []);
});
define('app', [
'angular',
'angularRoute',
'servicesFactory',
'controllersFactory',
'directivesFactory',
],
function(angular) {
return angular.module('app', ['app.services', 'app.controllers', 'app.directives', 'ngRoute']);
}
);
require(['app',
'jquery',
'skrollr',
'bootstrap',
'bootstrapJS',
'jqueryElastislide',
'jqueryPpCustom',
'modernizrCustom'],
function(app,
jquery,
skrollr,
bootstrap,
bootstrapJS,
jqueryElastislide,
jqueryPpCustom,
modernizrCustom) {
require([
'controllers/mainController'
],
function() {
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'templates/main.html', controller: "MainController"}).
otherwise({redirectTo: '/'});
}]);
angular.bootstrap(document, ['app']);
}
);
});
})();
From web inspector, I see that skrollr.min.js is loaded before the directives.js file so I believe the directives should be able to call the functions within skrollr.
Any suggestions would be greatly appreciated - thanks!

define(['directivesFactory', 'skrollr'], function(directivesFactory){
directivesFactory.directive('skrollr', [function(){
var directiveDefinitionObject = {
link: function() {
skrollr.init();
}
};
return directiveDefinitionObject;
}]);
});
You don't seem to have required skrollr here, you need to add the require.

Uncaught Error: No module: MyApp

I load AngularJs and jQuery using RequireJs in nodeJs framework.
That is main.js
require.config({
paths: {
angular: 'vendor/angular.min',
bootstrap: 'vendor/twitter/bootstrap',
jquery: 'vendor/jquery-1.9.0.min',
domReady: 'vendor/require/domReady',
underscore: 'vendor/underscore.min'
},
shim: {
angular: {
deps: [ 'jquery' ],
exports: 'angular'
}
}
});
require([
'app',
'angular-boot'
], function() {
});
in app.js
define(['angular'], function (angular) {
return angular.module('MyApp', []);
})
and in angular-boot.js
define([ 'angular', 'domReady' ], function (angular, domReady) {
domReady(function() {
angular.bootstrap(document, ['MyApp']);
});
});
In my html file I have only this line, in order to declare and use requirejs.
Not ng-ap or anything else.
<script data-main="js/main" src="js/require.js"></script>
The problem is that sometimes runs, sometimes not.
The error when it doesn't run is
Uncaught Error: No module: MyApp
If there is any thought about it, I would really appreciate it.
Thank you very much.

In your shim, you need to setup the app as a dependency to angular-boot. Your angular-boot file depends on app (where MyApp is defined), and because the load order for these two files is not specified, sometimes angular-boot loads before the app and thus produces that error.
To remedy, just update your shim as such:
shim: {
angular: {
deps: [ 'jquery' ],
exports: 'angular'
},
'angular-boot': {
deps: ['app']
}
}
and than, since you don't need to include the 'app' explicitly your require call can be reduced to:
require(['angular-boot']);

Trouble getting signalR to work with requireJS

I am having difficulty trying to get signalr to work with requirejs. This is my code I have but I get the following error:
_Uncaught Error: SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. <script src='/signalr/hubs'></script>._
Code:
<script src="~/Scripts/jquery.signalR-1.0.0-rc2.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
// requirejs configuration setup
requirejs.config({
baseUrl: '#string.Format("{0}://{1}{2}Scripts/modules", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))', // this might need to change as it depends on the number of / in the url...?
paths: {
'jquery': '../jquery-1.9.0',
'bootstrap': '../bootstrap',
'knockout': '../knockout-2.2.1',
'noext': '../noext',
'sigr': '../jquery.signalR-1.0.0-rc2'
},
shim: {
"sigr": {
deps: ['jquery']
},
"noext!signalr/hubs": {
deps: ['sigr']
}
}
});
Does anyone have any ideas as to why or how I can get this to work?

I was able to get require to work with requirejs..I followed the tutorial on http://requirejs.org/docs/jquery.html on how to plugin jquery and added signal references for this to work
require(["jquery", "jquery.alpha", "jquery.beta","jquery.signalr-1.0.0-rc2","/signalr/hubs"],
function($) {
}
);
I think you have to modify your configuration to do either of the following
Option1:
paths: {
'jquery': '../jquery-1.9.0',
'bootstrap': '../bootstrap',
'knockout': '../knockout-2.2.1',
'noext': '../noext',
'sigr': '../jquery.signalR-1.0.0-rc2'
'hubs': '/signalr/hubs'
},
Option2:
shim: {
"sigr": {
deps: ['jquery']
},
"noext!**/**signalr/hubs": {
deps: ['sigr']
}
}

Require.js Shim for loading JQuery UI and other JQuery Packages

I am trying to load JQuery-Ui with a shim, but JQueryUi keeps timing out when I try to load it even when I know the path is correct.
require.config({
paths: {
jQuery: 'libs/jquery-wrapper',
jQueryUi: 'libs/jquery-ui-min',
jQuerySelectmenu: 'libs/jquery.ui.selectmenu',
Underscore: 'libs/underscore-wrapper',
Backbone: 'libs/backbone-wrapper',
},
shim: {'Backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['Underscore', 'jQuery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'jQueryUi': {
deps: ['jQuery'],
},
'jQuerySelectmenu': {
deps: ['jQuery', 'jQueryUi']
}
}
});
require([
'jQuery',
'Underscore',
'Backbone',
'jQueryUi',
'jQuerySelectmenu'
],
function(App) {
require(['order!src/app']
, function (App) {
App.initialize();
});
});

I think what damee is offering stands for older version of requireJs. Just folllow this tutorial as I did: Load jQuery UI with requireJS

Try to use this project https://github.com/jrburke/jqueryui-amd to translate your jqueryui to modularized version. Then you can simply use it:
define(['jquery', 'jqueryui/tabs'], function($){
$('#tabs').tabs();
});
With requirejs config:
requirejs.config({
paths: {
'jqueryui': '/javascript-cdn/jqueryui/' //output form jqueryui-amd
},
shim: {
'jquery': {
deps: [],
init: function(){
return $;
}
},
'jqueryui': {
deps: ['jquery']
}
}
});
I hope this helps.