In my project, I have around 20 "modules" each with its own unique functionality but following the same structure. These modules are stored in separate files within their respective folders. For instance, the admin module is located in the modules/admin folder and includes the following files:
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 more......
All files across different modules share a common code structure enclosed within an immediately invoked function expression (iife).
To ensure error-free coding and facilitate easy structure reuse, it is necessary to define specific constants for each module and utilize them in controllers, routes, etc.
Although I am familiar with the module.config and constant functionalities, they do not solve the issue since reusing the same constant name twice is not allowed. This implies some parts of the code need rewriting even when untouched.
angular.module('app.foo').constant('CONST', {...})
would clash with
angular.module('app.bar').constant('CONST', {...})
Therefore, I devised a solution which functions well but feels somewhat inadequate.:
I centralize all static configurations in the *.module.js file
(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
};
})();
I then reuse this configuration in *.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);
}
})();
Furthermore, in all my *.*.controller.js files :
(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
// ACTUAL CODE GOES HERE
}
})();
This methodology aims to minimize alterations required in individual files when making changes on a module-wide level.
For example, if I alter the title from 'Admin' to 'Administration', I only need to make the change in one place instead of multiple files using the title. Additionally, my spec.js files are automated so tests remain intact even after modifying settings.
Is there a more elegant, angular-centric approach to address this challenge?