We Keep Coding

How to use Materialize with RequireJs

So far there's no AMD version of materializecss which makes it impossible to use with RequireJs
I tried using Shim config on RequireJs but I always get an error:
require.config({
baseUrl: '/resources/scripts',
catchError: true,
paths: {
'jquery': '//code.jquery.com/jquery-2.1.1.min',
'materialize': '../../build/bower_components/materialize/dist/js/materialize',
'velocity': '../../build/bower_components/materialize/js/velocity.min',
'hammerjs': '../../build/bower_components/materialize/js/hammer.min'
},
shim: {
'materialize': {
deps: ['jquery', 'hammerjs', 'velocity'],
exports: 'Materialize'
},
'velocity': {
deps: ['jquery']
}
}
});
The error:
require.js:168 Uncaught Error: Mismatched anonymous define() module: function ()

At the moment Materialize has a lot of problem with requiere. Here share the solution that I found. It works for me in Magento 2:
Load this "version" of materialize: https://github.com/ccloli/materialize/tree/AMD-fix/dist/js (note that is not a official release)
var config = {
paths: {
'jquery': '//code.jquery.com/jquery-2.1.1.min',
'materialize': 'Magento_Theme/js/materialize',
'velocity': 'Magento_Theme/js/velocity',
'hammerjs': 'Magento_Theme/js/hammerjs',
},
shim: {
'velocity': {
deps: ['jquery']
},
'hammerjs': {
deps: ['jquery']
},
'materialize': {
deps: ['jquery', 'velocity', 'hammerjs']
}
}
};
Hope it helps.

Module 'angular' is not available

I have a demo site running on EC2 and I pushed a version of the AngularJS app and now everything seems broken. I'm using AngularJS 1.2 and RequireJS 2.1. I have a modules/main_prod.js file. It looks like this:
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../js3p/jquery',
'jquery-ui': '../js3p/jquery-ui',
'jquery.ui.widget': '../js3p/jquery.ui.widget',
'bootstrap': '../js3p/bootstrap',
'angular': '../js3p/angular',
'angular-sanitize': '../js3p/angular-sanitize',
'ngUi': '../js3p/angular-ui',
'ui.bootstrap': '../js3p/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../js3p/calendar',
'angular-ui-router': '../js3p/angular-ui-router',
'uikeypress': '../js3p/keypress',
'dtPicker': '../js3p/bootstrap-datetimepicker.min',
'fileUpload': '../js3p/jquery.fileupload',
'fullcalendar': '../js3p/fullcalendar',
'iframeTransport': '../js3p/jquery.iframe-transport',
'lodash': '../js3p/lodash',
'moment': '../js3p/moment',
'restangular': '../js3p/restangular',
'typeahead': '../js3p/typeahead'
},
shim: {
'jquery': { deps: [] },
'jquery-ui': { deps: ['jquery'] },
'jquery.ui.widget': { deps: ['jquery'] },
'bootstrap': { deps: ['jquery'] },
'angular': { deps: ['jquery'], exports: 'angular' },
'angular-sanitize': { deps: ['angular'] },
'ngUi': { deps: ['angular'] },
'ui.bootstrap': { deps: ['angular', 'ngUi'] },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'] },
'angular-ui-router': { deps: ['angular', 'ngUi'] },
'uikeypress': { deps: ['angular', 'ngUi'] },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'] },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'] },
'fullcalendar': { deps: ['jquery', 'jquery-ui'] },
'iframeTransport': { deps: ['jquery', 'jquery-ui'] },
'lodash': { deps: [] },
'moment': { deps: ['jquery'] },
'restangular': { deps: ['angular', 'lodash'] },
'typeahead': {deps: ['jquery', 'bootstrap'] }
},
priority: ['angular']
});
require(['angular',
'angular-ui-router'],
function (angular, routes) {
require(['angular', 'app'], function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I load the page, I see all of these libraries loading. I even see the page load and it looks like half of Angular is working (I see directives filled in and whatnot). Anything subject to a ng-show attribute doesn't seem to work (shown when should be hidden), but my redirect that is within AngularJS does work. Every page load puts this in the console:
Error: [$injector:modulerr] Failed to instantiate module angular due to:
[$injector:nomod] Module 'angular' 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.
...
Let me know if more code is needed, I'm happy to provide. I'm at a total loss here.

So I came to find the problem. I'm working from the ngStart seed project and when it does a build for deployment it changes the top of the index.html file:
<!doctype html>
<!--(if target build)>
<html ng-app="angular" manifest="project.manifest">
<!(endif)-->
<!--(if target local)> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<!--<!(endif)-->
<head>
This ng-app="angular" is the actual cause of the error message. I removed it and things are behaving as expected.

You can't use angular and requirejs in this way. You need to use Angular ADM
https://github.com/marcoslin/angularAMD
http://www.startersquad.com/blog/angularjs-requirejs/

RequireJS Optimization Not Loading Libraries

I'm working with the ngStart Angular seed project and I'm trying to optimize RequireJS for deployment. When I run the grunt job to build the artifact, I end up with an output file that does not include all of the libraries in my main.js file. I've spent most of today trying different things to get this to work. If I explicity list every module in my gruntfile (something I really don't want to do) they all get in there, but seemingly not in the right order as it doesn't work in the browser. I thought that the optimizer was supposed to read the require.config call in my main.js and load everything in the correct order. Below is what I thought should work, but isn't loading all of my modules.
grunt task:
requirejs: {
compile: {
options: {
baseUrl: "<%= pkg.folders.jsSource %>",
name: "main",
include: [
'almond'
],
mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/modules/main.js",
optimize: "none",
paths: {
'almond': '../../../bower_components/almond/almond',
'config/configuration': 'config/<%=configuration%>'
},
generateSourceMaps: true,
preserveLicenseComments: false,
useSourceUrl: true,
uglify2: {
// TODO - angular.js is already minified, mangling destroys it, so mangling is currently globally disabled
mangle: false
}
}
}
}
main.js:
/*global require */
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../../../bower_components/jquery/jquery',
'jquery-ui': '../../../bower_components/jquery-ui/ui/jquery-ui',
'jquery.ui.widget': '../../../bower_components/jquery-ui/ui/jquery.ui.widget',
'bootstrap': '../../../bower_components/bootstrap/dist/js/bootstrap',
'angular': '../../../bower_components/angular/angular',
'ngResource': '../../../bower_components/angular-resource/angular-resource',
'angular-route': '../../../bower_components/angular-route/angular-route',
'angular-sanitize': '../../../bower_components/angular-sanitize/angular-sanitize',
'ngUi': '../../../bower_components/angular-ui/build/angular-ui',
'ui.bootstrap': '../external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../../../bower_components/angular-ui-calendar/src/calendar',
'uikeypress': '../../../bower_components/angular-ui-utils/modules/keypress/keypress',
'dtPicker': '../../../bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min',
'fileUpload': '../../../bower_components/blueimp-file-upload/js/jquery.fileupload',
'fullcalendar': '../../../bower_components/fullcalendar/fullcalendar',
'iframeTransport': '../external-libs/iframetransport/jquery.iframe-transport',
'moment': '../../../bower_components/momentjs/moment'
},
shim: {
'jquery': { deps: [], exports: 'jquery' },
'jquery-ui': { deps: ['jquery'], exports: 'jquery-ui' },
'jquery.ui.widget': { deps: ['jquery'], exports: 'jquery-ui-widget' },
'bootstrap': { deps: ['jquery'], exports: 'bootstrap' },
'angular': { deps: ['jquery'], exports: 'angular' },
'ngResource': { deps: ['angular'], exports: 'ngResource' },
'angular-route': { deps: ['angular'], exports: 'ngRoute' },
'angular-sanitize': { deps: ['angular'], exports: 'ngSanitize' },
'ngUi': { deps: ['angular'], exports: 'ngUi' },
'ui.bootstrap': { deps: ['angular', 'bootstrap', 'ngUi'], exports: 'ui-bootstrap' },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'], exports: 'ngCalendar' },
'uikeypress': { deps: ['angular', 'ngUi'], exports: 'uikeypress' },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'], exports: 'dtPicker' },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'], exports: 'fileUpload' },
'fullcalendar': { deps: ['jquery', 'jquery-ui'], exports: 'fullcalendar' },
'iframeTransport': { deps: ['jquery', 'jquery-ui'], exports: 'iframeTransport' },
'moment': { deps: ['jquery'], exports: 'moment' }
},
priority: ['angular']
});
require(['config/config',
'angular',
'angular-route'],
function (config, angular, routes) {
require(config.standardRequireModules, function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I run the task, I get this:
Running "requirejs:compile" (requirejs) task
Tracing dependencies for: main
/Users/user/dev/project/trunk-angular/target/project-0.1.0/modules/main.js
----------------
/Users/user/dev/project/trunk-angular/bower_components/almond/almond.js
/Users/user/dev/project/trunk-angular/bower_components/jquery/jquery.js
/Users/user/dev/project/trunk-angular/bower_components/angular/angular.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/configuration.js
/Users/user/dev/project/trunk-angular/bower_components/bootstrap/dist/js/bootstrap.js
/Users/user/dev/project/trunk-angular/bower_components/angular-ui/build/angular-ui.js
/Users/user/dev/project/trunk-angular/src/main/external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/config.js
/Users/user/dev/project/trunk-angular/bower_components/angular-route/angular-route.js
/Users/user/dev/project/trunk-angular/src/main/modules/main.js
Root of the project is /Users/user/dev/project/trunk-angular.
All of the path variables should be fine (they are in the other tasks and the outputted paths are right). I just don't know what's going on and would greatly appreciate some help.

First, I see, you are using nested require calls, but your build configuration doesn't include
findNestedDependencies: true.
Second, requirejs optimizer includes only those modules from path, that are explicitly required, or defined as a dependency for other modules, that are required later.

Uncaught Error: No define call in require.js

I am a newbie with backbone.js and require.js, I still not clear of how to use require.js. Now I'm trying to use require.js with Jquery Reveal.
This is my main.js :
requirejs.config({
enforceDefine: true,
paths: {
"jquery": "libs/jquery/jquery-min",
"underscore": "libs/underscore/underscore-min",
"backbone": "libs/backbone/backbone-min",
"jquery.reveal":"libs/jquery/jquery.reveal"
},
shim: {
"underscore": {
deps: [],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
"jquery.reveal": ["jquery"]
}
});
define(["jquery", "underscore", "backbone","jquery.reveal"],
function ($, _, Backbone,Jquery_Reveal) {
console.log("reveal " + typeof Jquery_Reveal);
}
);
app.js :
define([
'jquery',
'underscore',
'backbone',
'router',
'jquery.reveal'
], function($, _, Backbone,Router,Reveal){
var initialize = function(){
Router.initialize();
};
return {
initialize: initialize
};
});
Then I got an error in chrome console : Uncaught Error: No define call for reveal.

This is what I found and it works for me:
"reveal": {
deps: ["jquery"],
exports: "jQuery.fn.reveal"
}

Require map: Getting module timeout when mapping extension

I got a Mediator-Sandbox library and a Router extension built on top of this library.
The library is built up like this:
(function(window) {
var MedSan = {};
window.MedSan = MedSan;
})(this);
The extension looks like this:
(function(_, Backbone, MedSan) {
MedSan.Router = {};
})(_, Backbone, MedSan);
The requires config to load the extension looks like this:
require.config({
baseUrl: "javascripts",
shim: {
"jquery": {
exports: "$"
},
"underscore": {
exports: "_"
},
"backbone": {
deps: ['jquery', 'underscore'],
exports: "Backbone"
},
"Distribution": {
exports: "Distribution"
},
"Distribution.Router": {
deps: ['underscore', 'backbone', 'Distribution'],
exports: "Distribution"
}
},
/*
map: {
"*": {
"Distribution": "Distribution.Router"
}
},
*/
paths: {
"jquery": "Vendors/jquery",
"underscore": "Vendors/underscore",
"backbone": "Vendors/backbone",
"Distribution": "Distribution/Distribution",
"Distribution.Router": "Distribution/Plugins/Router"
}
});
I now can use my full library with:
require(['Distribution.Router'], function(Distribution) {});
when I uncomment the map configuration so I can use the full loaded module with router extension this way:
require(['Distribution'], function(Distribution) {});
than I am getting a module timeout.
What am I doing wrong?

When you map Distribution to Distribution.Router, you're creating a circular dependency because Distribution.Router also depends on Distribution.
To fix this just add another line overriding the map for Distribution in Distribution.Router only:
map: {
"*": {
"Distribution": "Distribution.Router"
},
"Distribution.Router": {
"Distribution": "Distribution"
}
}