Angularjs模块宽常量最佳实践

时间:2015-10-14 18:38:28

标签: javascript angularjs

我有几个具有自己功能的“模块”(aprox.20),但都具有相同的结构。每个“模块”都分布在不同的文件中。例如,admin“module”存储在modules / admin文件夹中,由以下文件组成:

admin.module.js
admin.routes.js
admin.content.jade
admin.content.controller.js
admin.content.controller.spec.js
admin.sidebartop.jade
admin.sidebar.controller.js
admin.sidebar.controller.spec.js
and many more......

所有模块的所有类似文件都具有相同的代码结构。 所有代码都封装在一个iifi中。

为了防止错误并简化结构重用,我需要定义一些模块特定的常量,并在控制器,路由等中重用这些const。

我知道module.config和常量功能。这种方法不起作用,因为我不能重复使用相同的名称两次。这意味着我仍然需要重写代码的某些部分,而我希望保持不变。

angular.module('app.foo').constant('CONST', {...}) 

会与

发生冲突
angular.module('app.bar').constant('CONST', {...})

所以我提出了以下解决方案,这很好用,但某种程度上感觉不合适。

我的所有静态配置都在* .module.js文件中完成

    (function () {
    'use strict';

    angular.module('app.admin', [
        'app.foo',
        'app.bar'
    ]).CONST ={
            module: 'Admin',
            state: 'admin',
            url : '/admin',
            path: 'app/views/modules/admin/',
            title: 'Admin',
            description: 'This is the admin module',
            acl: ['Developer','Administrator'],
            tileGroups: ['Company'],
            icon: 'mif-books',
            badge: 0,
            filters :
                {'rootNodes' :{where: {'Template.value' : 'Admin'} } },
            ready : false
        };
    })();

我在* .routes.js中重用配置:

    (function () {
        'use strict';

        var module =angular.module('app.details');
        var CONST = module.CONST;
        module.run(appRun);

        appRun.$inject = [ 'routerHelper'];
        /* @ngInject */
        function appRun( routerHelper) {
            var states = [{
                state: CONST.state,
                config: {
                    title: CONST.title,
                    url: CONST.url,
                    acl: CONST.acl,
                    templateUrl: CONST.path + CONST.state + '.content.html',
                    controller: CONST.module + 'ContentController',
                    controllerAs: 'vm',
                    ncyBreadcrumb: {
                        label: CONST.module
                    }
                }
            }
            ];
            routerHelper.configureStates(states);
        }
    })();

在我所有的*。*。controller.js文件中:

(function () {
    'use strict';

    angular
        .module('app.admin')
        .controller('AdminContentController', AdminContentController);

    AdminContentController.$inject = ['foo', 'bar'];
    /* @ngInject */
    function DetailsContentController(foo, bar) {
        var vm = this;
        _.extend(vm, CONST); // for re-usage in my jade / html files

        // AND HERE GOES THE ACTUAL CODE
    }
})();

这种方法的目的是最大限度地减少单个文件中所需的更改,如果某些内容发生“模块”变化。

例如,如果我将标题从“管理”更改为“管理”,则不必在使用标题的所有文件中更改此标题。此外,我的spec.js文件是自动化的,因此如果我更改设置,我的测试将保持一致。

必须有更少脏,更有棱角的解决此问题的方法?

1 个答案:

答案 0 :(得分:4)

使用constant()

(function () {
'use strict';

angular.module('app.admin', [
    'app.foo',
    'app.bar'
]).constant('CONST', {
        module: 'Admin',
        state: 'admin',
        url : '/admin',
        path: 'app/views/modules/admin/',
        title: 'Admin',
        description: 'This is the admin module',
        acl: ['Developer','Administrator'],
        tileGroups: ['Company'],
        icon: 'mif-books',
        badge: 0,
        filters :
            {'rootNodes' :{where: {'Template.value' : 'Admin'} } },
        ready : false
    });
})();

然后通过在注入中包含CONST来使用它。例如:

function AdminContentController(foo, bar, CONST) {...}
AdminContentController.$inject = ['foo', 'bar', 'CONST'];