Exporting/Importing AngularJS Controllers, Directives, Factories, Services with Webpack 4

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 调用 return 一个对象，但在您的实现中，您忽略了结果（不存储它）。您改为将对 .controller、.directive 等的调用链接到此匿名对象上。

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

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

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

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

例如:

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

SomeCtrl.$inject = ['Session', 'Api', '$scope'];
function SomeCtrl(Session, Api, $scope) {
...
}

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

John Papa's Style Guide 中涵盖了这些技巧（以及许多其他技巧）。对于认真优化 AngularJs 代码的任何人来说，本指南都是必读的。

Exporting/Importing AngularJS Controllers, Directives, Factories, Services with Webpack 4

Exporting/Importing AngularJS Controllers, Directives, Factories, Services with Webpack 4

angularjs

webpack

organization

webpack-4

angular-webpack