Angular module dependencies and config file separation - angularjs

Question

I have messed a bit in the understanding of the following things:
How to define required dependencies only in that modules I want and not define all of them in main app.js module?
Make it sense to store each config in separate file(e.g. config for routes, config for an angular plugin like 'toastr' and so on)
As for modules` dependencies, I cannot understand why I cannot move some dependencies from main app.js(like toastr, ngAnimate in my case) to a certain modules where these dependencies are required definetely. Look at my app structure and all dependencies:
app.js
'use strict';
angular
.module('app', [
'app.routes',
'app.constants',
// Below dependencies are not necessary here for all my modules.
// It is enough to have it only in logger.js module
'ngAnimate',
'toastr'
])
// TODO: Move 'toastr' configuration to separate file
// Angular Toastr taken from https://github.com/Foxandxss/angular-toastr/
.config(function (toastrConfig) {
angular.extend(toastrConfig, {
allowHtml: false,
closeButton: false,
closeHtml: '<button>×</button>',
containerId: 'toast-container',
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
maxOpened: 0,
messageClass: 'toast-message',
newestOnTop: true,
onHidden: null,
onShown: null,
positionClass: 'toast-bottom-full-width',
tapToDismiss: true,
target: 'body',
timeOut: 5000,
titleClass: 'toast-title',
toastClass: 'toast'
});
});;
app.constants.js
'use strict';
angular
.module('app.constants',[])
.constant('API_URI', 'http://localhost:8080/api/');
app.routes.js
'use strict';
angular
// Only this dependency work well here as I expect and I don't need to define it in main app.js module
.module('app.routes', ['ngRoute'])
.config(config);
function config($routeProvider, $locationProvider) {
// Use the HTML5 History API
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'todo/todo.html',
controller: 'TodoController'
})
.otherwise({
redirectTo: '/'
});
}
logger.js
'use strict'
angular
// Why I cannot define 'toastr', 'ngAnimate' dependencies here(not in app.js file) where it is definetely needed?
.module('app')
.factory('logger', logger);
logger.$inject = ['$log', 'toastr'];
function logger($log, toastr) {
var service = {
error: error,
info: info,
success: success,
warning: warning,
log: $log.log
}
return service;
function error(title, message, data) {
toastr.error(message, title);
$log.error('Error: ' + message, data);
}
function info(title, message, data) {
toastr.info(message, title);
$log.info('Info: ' + message, data);
}
function success(title, message, data) {
toastr.success(message, title);
$log.success('Success: ' + message, data);
}
function warning(title, message, data) {
toastr.warning(message, title);
$log.warning('Warning: ' + message, data);
}
}
If I trying to move 'toastr' and 'ngAnimate' dependencies from app.js to logger.js file, I receive the following error message:
Error: error:modulerr
Module Error
What I do wrong using dependencies in relative modules in comparison with main app.js module?
And the last short question, make it sense to store each configuration of something in a separate file? I think this way lead to better code readability, usage, robustness but what do you think about it?

Answer 1

You currently don't have a separate module for logger. The module it uses is the 'app' module.
Create a new 'app.logger' module in the same way you've created 'app.constants' and 'app.routes'. Add 'toastr' and 'ngAnimate' as dependencies of 'app.logger'
Once that's done, add 'app.logger' as a dependency of 'app'.
It makes no difference to the code, but it's good to keep files short and organize your files in a way that makes it easy to find what you need.