AngularJS(与John Papa Styleguide合作)+ RequireJS

时间:2017-03-15 14:21:47

标签: angularjs requirejs

我现在正在使用角度一段时间,特别是与John Papa的风格指南。但是我仍然不确定我是否理解它,特别是关于每个文件有一个项目的文件结构。

我尝试在一个带有requiresJS和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);
    });
})();

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时,我从来没有遇到任何问题。我真的开始讨厌要求......

2 个答案:

答案 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” 配置和控制器文件的依赖性。