How to import requireJS modules by name in angularJS - angularjs

Question

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

Answer 1

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.