Question

我对以下事情有所了解：

如何仅在我想要的模块中定义所需的依赖项，而不是在主app.js模块中定义所有依赖项？
将每个配置存储在单独的文件中是有意义的（例如，配置路由，配置角度插件，如＆＃39; toastr＆＃39;等等）

至于模块的依赖关系，我无法理解为什么我无法将主app.js（如toastr，在我的情况下为ngAnimate）中的某些依赖项移动到需要定义这些依赖项的某些模块。查看我的应用程序结构和所有依赖项：

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>&times;</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);
    }
}

如果我想移动＆＃39; toastr＆＃39;和＆＃39; ngAnimate＆＃39;从app.js到logger.js文件的依赖关系，我收到以下错误消息：

Error: error:modulerr
Module Error

与主app.js模块相比，在相关模块中使用依赖项我做错了什么？

最后一个简短的问题，将某些内容的配置存储在单独的文件中是否合理？我认为这种方式可以提高代码的可读性，使用率和稳健性，但您如何看待它呢？

Answer 1

您目前没有单独的记录器模块。它使用的模块是'app'模块。以与创建'app.constants'和'app.routes'相同的方式创建一个新的'app.logger'模块。将'toastr'和'ngAnimate'添加为'app.logger'的依赖项完成后，添加“app.logger”作为“app”的依赖项。
这对代码没有任何影响，但保持文件简短并以一种易于找到所需内容的方式整理文件是件好事。

角度模块依赖关系和配置文件分离

1 个答案: