1

我设法将我们的 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

            },

        };
    }])

在最后一个示例之后，只有一堆指令，所有内容都在这个巨大的文件中，因此需要对其进行组织以使其可维护。

那么导出所有这些的正确方法到底是什么？

4

1 回答 1

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

这些技巧（以及许多其他技巧）包含在John Papa 的风格指南中。对于认真优化 AngularJs 代码的任何人来说，本指南都是必读的。

于 2018-04-22T01:56:47.737 回答