AngularJS最佳實踐：組件應該添加到AngularJS模塊

Question

我有一個AngularJS項目，其中有一個shared目錄，其中有幾個共享組件。

- shared 
    - index.js 
    - alert 
     - index.js 
     - alert.component.js 
     - alert.controller.js 
     - alert.tpl.html 
     - alert.scss 
    - logging 
     - index.js 
     - logging.component.js 
     - logging.controller.js 
     - logging.tpl.html 
     - logging.scss 

該代碼在ES6中以模塊化方式編寫。因此，例如alert.component.js可能是這樣的：

import controller from './alert.controller' 
export const Alert = { 
    controller, 
    templateUrl: 'shared/alert/alert.tpl.html' 
}; 

我想有一個AngularJS模塊調用shared，其中兩個組件定義。我的問題是我應該在什麼層面上定義組件。它應該在組件目錄（shared/alert/index.js）內還是在共享目錄（shared/index.js）中。

在第一種情況下，文件shared/alert/index.js，應該是這樣的：

import { Alert } from './alert.component'; 
angular.module('shared').component('Alert', Alert); 

而在第二種情況下，該文件是這樣的：

export { Alert } from './alert.component'; 

然後這兩個組件會被定義在shared/index.js：

import { Alert } from './alert'; 
angular.module('shared').component('Alert', Alert); 

import { Logging } from './logging'; 
angular.module('shared').component('Logging', Logging); 

第一個ca對我來說，se似乎有點奇怪，因爲我有種讓組件自己添加到應用程序中的感覺。然而，在第二種情況下，如果我有很多共享組件，我最終會得到一個巨大的index.js文件。所以我想知道這些方法各有哪些優缺點，以及是否有最佳做法？

Answer 1

與任何「最佳實踐」一樣，最好的方法是從可能出現的這種情況下的可能問題中推導出來。

angular.module('shared')模塊getter通常是反模式，特別是在模塊化環境中。在模塊使用angular.module('shared', [])模塊設置器進行定義之後，應該對其進行評估。做相反的事情會導致競爭狀態和錯誤。

在第一種情況下在測試或其他模塊中導入shared/alert/index.js將導致錯誤，因爲shared模塊尚未定義。

在第二種情況下，不會出現此類問題，但前提是shared模塊在shared/index.js中定義。

與ES模塊配合使用的方法是one module per file。其結果是高度模塊化的應用程序和相對較低的樣板代碼量。好處是可重用性和可測試性，子模塊可以相互依賴，但不耦合到share。

如果某些子模塊包含影響整個應用程序的項目 - 裝飾器，配置/運行塊，包含它們的第三方模塊（路由器），這一點很重要。