我已经与Angular一起工作了一段时间,尤其是与John Papa的StyleGuide一起工作。但是我仍然不确定是否正确理解它,尤其是关于文件结构,每个文件一项。
我尝试在一个与AngularJs结合使用的项目中进行此操作,但不幸的是它似乎不起作用...
有关应用程序的一些背景:
这是一个具有一个main.js和app.js 的多模块应用程序。每个模块都在自己的Maven模块中开发,带有一个小的Java-backend及其自己的URL-context。目前,所有子模块都在main.js-> 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);
});
})();
例如。此应用程序中的子模块之一如下:
/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时,我从来没有任何问题。我真的开始讨厌的是....
编辑这些文件的开始如下:
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"
});
您应该更改Angular 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"配置和控制器文件的依赖。