Assume in an Angular project we have added all controllers as modules by require.js:
// js/controllers/modules.js
define("appControllers", ['angular'], function (ng) {
'use strict';
return ng.module('app.controllers', []);
});
and all controllers are defined in separated files
// js/controllers/home-controller.js
define(['appControllers'], function (controllers) {
'use strict';
controllers.controller('HomeController', ['$scope', function ($scope) {
// my logics here
}]);
});
usage in application
// js/app.js
define([
'angular',
'./controllers'
], function (angular) {
'use strict';
return angular.module('app', [
'app.controllers'
]);
});
This works very fine as long as controllers are in js/controllers directory. but apparently it doesn't work after grunt minifies JS files into a single main.min.js file.
How to change this code to work in a single minified main.min.js file?
Additional context
I tried to use the name of modules instead of their path, but I couldn't get it to work.
I get this error :
http://127.0.0.1:9001/javascripts/appControllers.js
Uncaught Error: Script error for "appControllers", needed by: app
maybe too late.but for loading requireJs modules by name you can call requirejs.config() method before bootstrapping angular.
sample code :
// before bootstrapping ...
requirejs.config({
waitSeconds:60,
baseUrl: exports.paths.scripts.in.get(),
paths: {
"jquery": bowerComponents + "jquery/dist/jquery.min",
"tinymce": bowerComponents + "tinymce/tinymce.min",
"angular-tinymce": bowerComponents + "angular-ui-tinymce/dist/tinymce.min",
"angular": bowerComponents + "angular/angular.min",
"angular-ui-router": bowerComponents + "angular-ui-router/release/angular-ui-router.min",
"angular-re-tree": bowerComponents + "re-tree/re-tree.min",
"angular-device-detector": bowerComponents + "ng-device-detector/ng-device-detector.min",
"angular-messages": bowerComponents + "angular-messages/angular-messages.min",
"angular-local-storage": nodeModules + "angular-local-storage/dist/angular-local-storage.min",
"angular-resource": bowerComponents + "angular-resource/angular-resource.min",
"adm-dtp": bowerComponents + "adm-dtp/dist/ADM-dateTimePicker.min",
"angular-animate": nodeModules + "angular-animate/angular-animate.min",
"angular-aria": nodeModules + "angular-aria/angular-aria.min",
"angular-material": nodeModules + "angular-material/angular-material.min",
"material-steppers": nodeModules + "md-steppers/dist/md-steppers.min",
"angular-sanitize": nodeModules + "angular-sanitize/angular-sanitize.min",
"spin": nodeModules + "angular-spinner/node_modules/spin.js/spin.min",
"angular-spinner": nodeModules + "angular-spinner/angular-spinner.min",
"angular-resizable": nodeModules + "angular-resizable/src/angular-resizable",
"ng-file-upload": nodeModules + "ng-file-upload/dist/ng-file-upload.min",
"angular-material-icons": nodeModules + "angular-material-icons/angular-material-icons.min",
"underscore": bowerComponents + "underscore/underscore-min",
"jquery-nanoscroller": bowerComponents + "angular-nanoscroller/jquery.nanoscroller.min",
"angular-nanoscroller": bowerComponents + "angular-nanoscroller/scrollable",
"angular-material-data-table": bowerComponents + "angular-material-data-table/dist/md-data-table",
"element-queries": nodeModules + "css-element-queries/src/ElementQueries",
"jquery-resize": "vendors/jquery.resize",
"jquery-print": "vendors/jQuery.print",
"ng-scrollable": "vendors/ng-scrollable",
"angular-truncate": "vendors/truncate",
"string": nodeModules + "string/dist/string.min",
"masonry": bowerComponents + "masonry/dist/masonry.pkgd.min"
},
shim: {
"jquery": {
deps: [],
exports: "$"
}, "jquery-resize": {
deps: ["jquery"],
exports: "$"
}, "jquery-print": {
deps: ["jquery"],
exports: "$"
}, "jquery-nanoscroller": {
deps: ["jquery"],
exports: "$"
}, "angular": {
deps: [],
exports: "angular"
}, "angular-ui-router": {
deps: ["angular"],
exports: "angular"
}, "angular-tinymce": {
deps: ["angular","tinymce"],
exports: "angular"
}, "tinymce": {
deps: [],
exports: "tinyMCE"
}, "angular-local-storage": {
deps: ["angular"],
exports: "angular"
}, "angular-animate": {
deps: ["angular"],
exports: "angular"
}, "angular-aria": {
deps: ["angular"],
exports: "angular"
}, "angular-material": {
deps: ["angular"],
exports: "angular"
},"material-steppers": {
deps: ["angular"],
exports: "angular"
}, "angular-material-icons": {
deps: ["angular"],
exports: "angular"
}, "angular-re-tree": {
deps: ["angular"],
exports: "angular"
}, "angular-device-detector": {
deps: ["angular-re-tree"],
exports: "angular"
}, "angular-resizable": {
deps: ["angular"],
exports: "angular"
}, "angular-messages": {
deps: ["angular"],
exports: "angular"
}, "angular-truncate": {
deps: ["angular"],
exports: "angular"
}, "angular-sanitize": {
deps: ["angular"],
exports: "angular"
}, "angular-resource": {
deps: ["angular"],
exports: "angular"
},"ng-file-upload": {
deps: ["angular"],
exports: "angular"
}, "adm-dtp": {
deps: ["angular"],
exports: "angular"
}, "angular-nanoscroller": {
deps: ["angular", "jquery-nanoscroller"],
exports: "angular"
}, "angular-material-data-table": {
deps: ["angular","angular-material"],
exports: "angular"
}, "ng-scrollable": {
deps: ["angular"],
exports: "angular"
}
}
});
//requirejs module resolution by name + bootstrapping angular ....
define(["jquery",
"angular",
"angular-ui-router",
"angular-animate",
"angular-aria",
"angular-material",
"material-steppers",
"angular-device-detector",
"angular-resizable",
"angular-messages",
"angular-local-storage",
"underscore",
"element-queries",
"string",
"jquery-resize",
'angular-material-icons',
'angular-spinner',
'angular-nanoscroller',
'angular-truncate',
'angular-sanitize',
'angular-resource',
'jquery-print',
'ng-file-upload',
'adm-dtp',
'angular-material-data-table',
'ng-scrollable',
'tinymce',
'angular-tinymce',
"masonry"],
function (jquery,
angular,
angularUiRouter,
angularAnimate,
angularAria,
angularMaterial,
materialSteppers,
angularDeviceDetector,
angularResizable,
angularMessages,
angularLocalStorage,
underscore,
elementQueries,
string,
jqueryResize,
angularMaterialIcons,
angularSpinner,
angularNanoScroller,
angularTruncate,
angularSanitize,
angularResource,
jqueryPrint,
ngFileUpload,
admDateTimePicker,
angularMaterialDataTable,
ngScrollable,
tinyMce,
angularTinyMce,
masonry) {
var app = angular.module("app", ['ui.router', 'ngMaterial', 'ngMessages', 'LocalStorageModule', 'angularResizable', 'ng.deviceDetector', 'ngMdIcons', 'angularSpinner', 'sun.scrollable', 'md.data.table', 'truncate', 'ngResource', 'ngScrollable', "ngSanitize", "ngAnimate", 'ADM-dateTimePicker', 'ngFileUpload','md-steppers','ui.tinymce'],
function config() {
});
app.run(function ($rootScope, $state,security,materialDataTable,state) {
$rootScope.$on('$stateChangeStart', function (event, toState) {
if (toState.data && toState.data.secure && !security.isAuthenticated()) {
$state.go("root.login");
event.preventDefault();
}
});
$rootScope.$on('$stateChangeSuccess', function (event, toState) {
if(toState.data.resetDataContextAfterStateActivated) {
//create new context or reset preexist context
materialDataTable.getContext(state.current.getDataServiceName(), state.current.getDataService(),true);
}
});
});
var afterBootstrapTasks = [];
function startAngular() {
var root = document.getElementsByTagName("body")[0];
angular.bootstrap(root, ["app"]);
var injector = angular.element(root).injector();
afterBootstrapTasks.forEach(function (item) {
item(injector);
});
}
return {
jquery: jquery,
angular: angular,
angularUiRouter: angularUiRouter,
underscore: underscore,
elementQueries: elementQueries,
jqueryResize: jqueryResize,
string: string,
masonry: masonry,
app: app,
startAngular: startAngular,
storage: angularLocalStorage,
directives: [],
afterBootstrapTasks: afterBootstrapTasks,
tinyMce:tinyMce,
};
});
this was the script loading part of my last angular js project that I was working on it last year. now everything is changed. and angularjs is not my favorite javascript framework. I hope my answer can be helpful.
Im facing a problem when I try to use browserify, angularjs and restangular.
When I try to require the npm or bower module, for example require('restangular), browserify returns empty object. This happens when i require any bower or npm modules. When I try to require any local file, everything is working fine.
file structure:
bower_components/
src/
-client
-app
app.js
backend
backend.module.js
-test
test.module.ls
test.js
node_modules/
app.js
(function() {
'use strict';
require('angular');
var rest = require('restangular');
console.log(rest);
module.exports = angular
.module('app', [
require('restangular').name,
require('./test/test.module').name,
]);
})();
package.json
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"restangular": "./bower_components/restangular/dist/restangular.js"
},
"browserify-shim": {
"restangular": "restangular"
}
gulpfile.js
gulp.task('browserify', function() {
gulp.src(['./src/client/app/app.js'])
.pipe(plugins.browserify({
insertGlobals: true,
debug: true
}))
.pipe(plugins.concat('bundled.js'))
.pipe(gulp.dest('./src/client/js'))
});
Can you help me?
Thanks in advance.
Just modify your "browser" part in package.json:
"browserify-shim": {
"angular": {
"exports": "angular"
},
"restangular": {
"depends": [
"angular"
],
"exports": "restangular"
}
}
Hope it will work.
Try modifying your package.json file with this snippet.
"browser": {
"restangular": "./bower_components/restangular/dist/restangular.js"
},
"browserify-shim": {
"restangular": {
"depends": [
"angular",
"lodash:_"
],
"exports": "null"
}
}
Solution courtesy of #newtricks from this discussion
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);
});
In my app, I am using requirejs with handlbars plugin(https://github.com/SlexAxton/require-handlebars-plugin), I integrated with my app..
But I am keep getting an error, which i am not able to figureout why?
here is my error:
my require config file :
require.config({
baseUrl :'bower_components',
paths: {
"scripts":'../scripts',
"jquery":"jquery/jquery.min",
"underscore" :"underscore-amd/underscore-min",
"backbone" :"backbone-amd/backbone-min",
"marionette":"backbone.marionette/lib/backbone.marionette.min",
"text" : "requirejs-text/text",
"hbs":"require-handlebars-plugin/hbs",
"handlebars":"require-handlebars-plugin/handlebars",
'i18nprecompile' : 'require-handlebars-plugin/hbs/i18nprecompile',
'json2' : 'require-handlebars-plugin/hbs/json2'
},
shim: {
"jquery": {
exports: '$'
},
"underscore":{
exports: '_'
},
"backbone": {
deps: ["jquery","underscore"],
exports: "Backbone"
},
"marionette": {
deps: ["jquery", "underscore", "backbone"],
exports: "Marionette"
}
}
});
require(["scripts/main"]);
my view file :
define([
'jquery',
'underscore',
'backbone',
'hbs!../template/login1Template.hbs'],
function ($,_,Bacbone,hbr) {
"use strict";
socialApp = window.socialApp || {};
socialApp.loginView = Bacbone.View.extend({
template:_.template(loginTemplate),
initialize:function(){
var temp = hbr({adjective: "favorite"});
}
});
return socialApp.loginView;
}
);
Any one help me to sort this issue please? it's sucking my time here!
Thanks for all...
The problem is, I use bower.js to install all my moudles. in the plugin, it's not installed properly. some of files are missing from the git. manually i updated and the handlebars loading now.