假设在Angular项目中，我们已将所有控制器作为模块添加到require.js：
// js/controllers/modules.js
define("appControllers", ['angular'], function (ng) {
'use strict';
return ng.module('app.controllers', []);
});
并且所有控制器都在单独的文件中定义
// js/controllers/home-controller.js
define(['appControllers'], function (controllers) {
'use strict';
controllers.controller('HomeController', ['$scope', function ($scope) {
// my logics here
}]);
});
在应用程序中的用法
// js/app.js
define([
'angular',
'./controllers'
], function (angular) {
'use strict';
return angular.module('app', [
'app.controllers'
]);
});
只要控制器位于js/controllers目录中，这就非常好用。但显然在grunt将JS文件缩小为单个main.min.js文件后它无法正常工作。
如何更改此代码以使用单个缩小的main.min.js文件？
附加背景
我试图使用模块的名称而不是路径，但我无法使用它。
我收到此错误：
http://127.0.0.1:9001/javascripts/appControllers.js
Uncaught Error: Script error for "appControllers", needed by: app
答案 0 :(得分：0)
可能为时已晚。但是为了按名称加载requireJs模块，你可以在bootstrapping angular之前调用requirejs.config（）方法。
示例代码：
//在引导之前......
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模块解析名称+ 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,
};
});
这是我去年在工作的最后一个角度js项目的脚本加载部分。现在一切都改变了。和angularjs不是我最喜欢的JavaScript框架。我希望我的回答会有所帮助。