Question

我想知道进行此操作的最佳方法是什么。

// directive.js

(function() {
  'use strict';

angular
    .module('my.dir', [])
    .directive('my-dir', MyDirDirective);

function MyDirDirective() {
    return {
        restrict: 'E',
        controller: MyDirController
    }
}
})();

// controller.js

(function() {
  'use strict';

    angular
      .module('my.dir', [])
      .controller('MyDirController', MyDirController);

    function MyDirController() {

    }
})();

我有这两个文件，我想将它们导出到单个index.js中，这样我就可以将index.js导入到主app.js中，以便将其作为依赖项加载，这样我就可以使用webpack。

什么是最好的方法？

非常感谢您。

Answer 1

使用webpack，您应该能够使用ES6类。因此，这两个文件可以合并为一个文件：

my-directive.js

export default function MyDirDirective() {
  return {
    restrict: 'E',
    controller: MyDirController
  }
};

class MyDirController {
  constructor() {
    // code for constructor
  }

  // other methods
}

然后您可以为模块添加另一个文件：

dir-module.js

import MyDirDirective from 'my-directive.js';

export default angular
  .module('my.dir', [])
  .directive('myDir', MyDirDirective);

然后，在index.js中，只需导入此模块。

index.js

import 'dir-module.js';

Answer 2

directive.js：

export function MyDirDirective() {
    return {
        restrict: 'E',
        controller: MyDirController
    }
}

controller.js：

export function MyDirController() {

}

app.module.js：

import * as angular from 'angular';
import MyDirDirective from './directive';
import MyDirController from './controller';

export const myModule = angular.module('...', [])
      .directive('myDir', MyDirDirective)
      .controller('MyDirController', MyDirController)
      .name;

但是，除非您要在其他地方使用它，否则我建议不要导出（甚至注册MyDirController）。

如果可以使用打字稿，也可以使用angular-ts-decorators。

Angular js 1.x导入/导出具有不同IIFES的模块，以便能够与webpack一起使用

2 个答案: