Question

我设法将AngularjS 1.3.15项目从Gulp迁移到Webpack 4，现在我正在尝试将所有5000多行文件组织成单独的文件。问题是我不知道如何导出AngularJS控制器或指令等，以便轻松导入到index.js文件中，以便可以导入到我们的main.js文件中。

示例，我们的一个巨大文件以angular.module开头，然后是控制器，如下所示：

(function () {

angular.module('AppName', ['app.services'])


    .controller('SomeCtrl', ['Session', 'Api', '$scope',
        function (Session, Api, $scope) {

        let init = function () {
                console.log('Stuff');
            };

            init();
        }])

然后是工厂：

.factory('GlobalChart', [function () {

    let self = this;
    self.containerWidth = 210;
    self.containerHeight = 210;
    self.width = 150;
    self.height = 150;
    self.radius = Math.min(self.width, self.height) / 2;

    return this;

}])

遵循指令：

.directive('reportTopbar', ['$window',
    function ($window) {

        return {
            templateUrl: 'views/someview.html?v=' + GLOBAL_VERSION,
            transclude: false,
            scope: {
                data: '='
            },
            link: function (scope, element, attrs, ctrl) {          

                // code here

            },

        };
    }])

在最后一个例子之后，只有一堆指令，一切都在这个巨大的文件中，因此需要组织它以使其可维护。

那究竟什么是正确的方法来导出所有这些？

Answer 1

首先检查你拥有的东西。

angular.module调用返回一个对象，但在您的实现中，您忽略了结果（不存储它）。而是将对.controller，.directive等的调用链接到此匿名对象上。

解决此问题的一种可能方法是存储模块调用的返回值（即var app = angular.module(....)），这可以导出。然后，在每个其他调用中，您可以链接存储的值（app.directive(...)），然后使每个调用与主代码文件分离，并且可能是可导出的。

这种方法是解决当前问题的最直接方法，因为它只需要声明一个变量，然后在整个代码中引用变量。但是，它不是最佳解决方案。

另一种可能的方法是将每个控制器，工厂，指令等声明为函数，并按名称将它们链接到角度模块上。

这也提出了另一个主题，您可以在其中改进代码的功能和可读性：依赖注入。您可以使用$inject代替内联依赖声明，以便将来导入和缩小代码更清晰。

例如：

angular.module('AppName', ['app.services']) .controller('SomeCtrl', SomeCtrl); SomeCtrl.$inject = ['Session', 'Api', '$scope']; function SomeCtrl(Session, Api, $scope) { ... }

现在，您可以将Angular Module Definition和所有控制器，工厂，指令等一起声明的单个文件导出到一个易于识别的位置。然后，可以根据需要将所有单个函数导出到自己的文件中，从而保持代码清晰，清晰和可读。

这些提示（以及许多其他提示）包含在John Papa's Style Guide中。对于那些认真考虑优化AngularJs代码的人来说，本指南是必读的。

使用Webpack 4导出/导入AngularJS控制器，指令，工厂，服务

1 个答案: