我现在正在使用角度一段时间，特别是与John Papa的风格指南。但是我仍然不确定我是否理解它，特别是关于每个文件有一个项目的文件结构。
我尝试在一个带有requiresJS和angularJS的项目中这样做，但遗憾的是它似乎不起作用......
有关申请的一些背景知识：
这是一个多模块应用程序，其中一个main.js和app.js 。每个模块都是在自己的maven模块中开发的，它有一个小的java-backend和自己的url-context。现在所有子模块都在main.js中引用 - ＆gt; require.config.path例如。
main.js：
require.config({
// Paths to vendor scripts and separate files.
paths: {
'myModule': '../../mymodule/mymodule',
'myOtherModule': '../../myothermodule/myothermodule',
... // many more angular modules
},
// Create shims for vendor libraries that aren't AMD modules and specify dependencies for them.
shim: {
'angular': {deps: ['jquery'], exports: 'angular'},
'angularEN': {deps: ['angular'], exports: 'angularEN'},
'angularDE': {deps: ['angular'], exports: 'angularDE'},
'angularCH': {deps: ['angular'], exports: 'angularCH'},
'ngResource': {deps: ['angular'], exports: 'ngResource'},
'ngCookies': {deps: ['angular'], exports: 'ngCookies'},
'angularRoute': ['angular'],
'jquery': {exports: '$'},
'jquery_cookie': ['jquery'],
'hammer': ['jquery'],
'materializeClockpicker': ['materialize'],
'materialize': {deps: ['jquery', 'hammer']},
'angularMaterialize': ['materialize'],
'moment': {exports: 'moment'},
'angularMoment': ['moment'],
'foundation': ['jquery'],
'ngTable': {deps: ['angular', 'jquery'], exports: 'ngTable'},
'nvd3': {deps: ['d3'], exports: 'nvd3'},
'angularnvd3': {deps: ['angular', 'nvd3'], exports: 'angular-nvd3'},
'ngSanitize': {deps: ['angular'], exports: 'ngSanitize'},
'ocLazyLoad': {deps: ['angular'], exports: 'ocLazyLoad'},
'uiRouter': {deps: ['angular'], exports: 'uiRouter'},
'ncyangularbreadcrumb': {deps: ['angular'], exports: 'ncyangularbreadcrumb'},
'treeControl': {deps:['angular'], exports:'treeControl'},
'ngAnimate': {deps: ['angular'], exports: 'ngAnimate'},
'ngMap': {deps:['angular'], exports:'ngMap'},
'angularFileSaver': {deps: ['angular', 'fileSaver', 'blob'], exports: 'angularFileSaver'},
'nliMenu': {deps:['angular','treeControl'],exports:'nliMenu'},
'mmFoundationTpls': {deps: ['angular'], exports: 'mmFoundationTpls'},
'adf': {deps:['mmFoundationTpls', 'sortable'],exports:'adf'},
'adfBase': {deps:['adf'],exports:'adfBase'},
'localStorage': {deps: ['angular'], exports: 'localStorage'},
'angularUiTree': {deps: ['angular'], exports: 'angularUiTree'},
'angularRecaptcha': {deps: ['angular'], exports: 'angularRecaptcha'}
},
// kick start application
deps: ['../../core/js/bootstrap']
bootstrap.js：
define([
'require',
'angular',
'app',
'app.config',
'app.run',
'app.controllers',
'jquery',
'foundation',
'modernizr'
], function (require, angular) {
'use strict';
require(['domReady!'], function (document) {
angular.bootstrap(document, ['myAwesomeApplication']);
});
});
app.js：
define([
'angular',
'app.controllers',
'app.config',
'app.run',
'appServices',
'appFilters',
'appDirectives',
'angularRoute',
'ngResource',
'angularnvd3',
'ngSanitize',
'uiRouter',
'uiRouterExtras',
'offscreenMenu',
'ncyangularbreadcrumb',
'angularFileSaver',
'treeControl',
'angularUiTree',
'adf',
'adfBase',
'dashboardPersistence',
'mmFoundationTpls',
'localStorage',
'ngMap',
'ngTable',
'ngAnimate',
'angularMaterialize',
'materializeClockpicker',
'angularMoment',
/*Custom services*/
'lang',
'templatingUtils',
'appUtils',
'resetUtils',
'passwordPolicyUtils',
'nliConnector',
'nliCaptcha',
'nliMessages',
'menuUtils',
'nliMasterData',
'validationUtils',
'messagingUtils',
'uiCoreServices',
'angularRecaptcha',
'cacheUtils',
//... many more
'myModuleModule',
'myOtherModule'
],
function (angular, appControllers, appConfig, appRun) {
return angular
.module('portals.nli', [
'smo.controllers',
'gkp.services',
'gkp.filters',
'gkp.directives',
'adf',
'adf.structures.base',
'adf.nli.persistence',
'ct.ui.router.extras',
'fileSaver',
'LocalStorageModule',
'mm.foundation',
'ncy-angular-breadcrumb',
'ngAnimate',
'ngMap',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTable',
'nvd3',
'ui.router',
'ui.tree',
'treeControl',
'ui.materialize',
'angularMoment',
/* Custom Services */
'portals.nli.appUtils',
'portals.nli.resetUtils',
'portals.nli.captcha',
'portals.nli.connector',
'portals.nli.lang',
'portals.nli.messagingUtils',
'portals.nli.passwordPolicyUtils',
'portals.nli.templatingUtils',
'portals.nli.uiCoreServices',
'portals.nli.validationUtils',
'vcRecaptcha',
'portals.nli.cacheUtils',
'mymodule',
'myothermodule'
])
.constant(
'APP_CONSTANTS', {
...
}
)
.constant('Modernizr', Modernizr)
.value('APP_VALUES', {
...
})
.config(appConfig)
.run(appRun);
});
})();
e.g。本应用程序中的一个子模块如下所示：
/mymodule
/mymodule.js
/mymodule.config.js
/mymodule.controller.js
mymodule.js：
define([
'angular',
'mymodule.config',
'mymodule.controller'
],
function(angular) {
'use strict';
return angular
.module('myModule', [])
.constant('APP_CONSTANTS', {
...
})
.run('APP_CONSTANTS', function (APP_CONSTANTS) {
...
}]);
});
mymodule.config：
define(['angular', 'mymodule'], function(angular) {
'use strict';
angular
.module('myModule')
.config(config);
config.$inject=['$logProvider', '$stateProvider'];
function config($logProvider, $stateProvider) {
$logProvider.debugEnabled(true);
$stateProvider
...
}
return config;
});
mymodule.controller.js：
define(['angular', 'mymodule'], function(angular) {
'use strict';
angular
.module('myModule')
.controller('MyModuleController', MyModuleController);
MyModuleController.$inject=['$scope', '$log'];
function MyModuleController($scope, $log) {
var vm = this;
/** ====================
* (Bindable) Members
* ==================== */
vm.annualConsumption = null;
vm.calorificVal = null;
vm.zNumber = null;
vm.checkValues = checkValues;
vm.calculateGasConsumption = calculateGasConsumption;
/** ========================
* Implementation Details
* ======================== */
function checkValues() {
return vm.annualConsumption && vm.calorificVal && vm.zNumber;
}
function calculateGasConsumption() {
return vm.annualConsumption * vm.calorificVal * vm.zNumber;
}
}
return MyModuleController;
});
不幸的是我在控制台上遇到异常：
Uncaught Error: [$injector:nomod] Module 'myModule' 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.
http://errors.angularjs.org/1.2.18/$injector/nomod?p0=myModule
at angular.js?v=2017-03-15:78
at angular.js?v=2017-03-15:1643
at ensure (angular.js?v=2017-03-15:1567)
at Object.module (angular.js?v=2017-03-15:1641)
at mymodule.config.js?v=2017-03-15:6
at Object.execCb (require233.js:1696)
at Module.check (require233.js:883)
at require233.js:630
at each (require233.js:59)
at breakCycle (require233.js:619)
也许你可以看看并告诉我什么是错的？那太棒了，因为我真的很难过。 :-(当我没有使用requireJS时，我从来没有遇到任何问题。我真的开始讨厌要求......
答案 0 :(得分：0)
编辑这些文件的开头，如下所示：
mymodule.js：
define([
'angular',
],
mymodule.config：
define(['angular', 'mymodule'], function(angular,myModule) {
myModule.config(config);
mymodule.controller：
define(['angular', 'mymodule'], function(angular,myModule) {
myModule.controller('MyModuleController', MyModuleController);
并将其引导至某处（例如index.js），如下所示：
requirejs(["mymodule","mymodule.config","mymodule.controller"],function(mymodule){
//bootstrap 'mymodule' by hand without "ng-app"
});
答案 1 :(得分：0)
您应该像这样更改角度mymodule.js：
define(['angular'], function (angular) {
'use strict';
var ret = angular
.module('myModule', [])
.constant('APP_CONSTANTS', {
})
.run('APP_CONSTANTS', function (APP_CONSTANTS) {
});
requirejs(['mymodule.config', 'mymodule.controller'], function () {
// do some bootstrap things
});
return ret;
});
删除“mymodule” 配置和控制器文件的依赖性。