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

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) {
...
}

现在，您可以在一个易于识别的位置导出一个带有角模块定义和所有控制器、工厂、指令等一起声明的文件。然后，可以根据需要在自己的文件中导出所有单个函数，以保持代码的清晰、干净和可读性。

这些技巧(以及其他许多技巧)在约翰·爸爸的风格指南中都有介绍。对于任何认真优化AngularJs代码的人来说，本指南是必须阅读的。