建造優質角1.5組件的指南-js教程-PHP中文網

還應該注意的是，通過新的組件API，Angular 2的許多最佳實踐都被引入到Angular 1中，使您可以構建更容易以後重構的應用程序。 Angular 2影響了我們思考和設計Angular 1組件的方式，但仍然存在許多明顯的差異。 Angular 1仍然是構建應用程序的非常強大的工具，因此我相信即使您不打算或尚未準備好遷移到Angular 2，投資使用組件改進您的應用程序也是值得的。

什麼是好的組件？

組件的設計應考慮許多關鍵特性，以使其成為應用程序的強大構建塊。我們將更詳細地探討每一個特性，但以下是組件應遵循的主要概念。

隔離：組件的邏輯應封裝起來，保持內部和私有。這有助於減少組件之間的耦合。
專注：組件應作為單一單元執行一項主要任務，這使得它們易於理解，並且通常更易於重用。
單向綁定：盡可能使用單向綁定來減少摘要周期的負載。
使用生命週期事件：組件的生命週期從實例化開始，到從頁面中移除結束。最好利用這些事件來維護組件。
明確的API：組件應以一致的方式接受配置作為屬性，以便易於了解如何使用它們。
發出事件：為了與其他組件通信，它們應該發出具有適當名稱和數據的事件。

現在讓我們首先了解為什麼以及如何將組件與應用程序的其餘部分隔離和封裝。

組件應隔離

Angular 1功能的演變是為了啟用隔離和封裝的組件，這是有充分理由的。一些早期的應用程序與$scope和嵌套控制器的使用高度耦合。最初Angular沒有提供解決方案，但現在有了。

好的組件不會暴露其內部邏輯。由於它們的設計方式，這很容易實現。但是，除非絕對必要（例如發出/廣播事件），否則應避免濫用組件使用$scope。

組件應專注

組件應承擔單一角色。這對於可測試性、可重用性和簡單性非常重要。最好創建額外的組件，而不是超載單個組件。這並不意味著您不會擁有更大或更複雜的組件，它只是意味著每個組件都應專注於其主要工作。

我根據組件在應用程序中的作用將其分為四個主要組，以幫助您考慮如何設計組件。構建這些不同類型的組件沒有不同的語法——只需要考慮組件所承擔的特定角色即可。

這些類型基於我5年以上的使用Angular的經驗。您可以選擇略微不同的組織方式，但根本概念是確保您的組件具有明確的角色。

應用程序組件

只有一個應用程序組件可以充當應用程序的根。您可以將其視為在Web應用程序的主體中只有一個組件，所有其他邏輯都通過它加載。

<code>>
  <app>></app>>
>
</code>

登入後複製

這主要推薦用於Angular 2設計一致性，因此如果您希望遷移，將來會更容易。它還通過將應用程序的所有根內容移動到單個組件中（而不是將其中一些內容放在index.html文件中）來幫助測試。應用程序組件還為您提供了一個進行應用程序實例化的地方，因此您不必在應用程序運行方法中執行此操作，從而增強了可測試性並減少了對$rootScope的依賴。

此組件應盡可能簡單。如果可能，它可能只包含模板，而不包含任何綁定或控制器。但是，它不會替換ng-app或引導應用程序的需要。

路由組件

過去，我們在ui-router狀態（或ngRoute路由）中鏈接控制器和模板。現在可以將路由直接鏈接到組件，因此組件仍然是控制器和模板配對的地方，但也有可路由的優點。

例如，使用ui-router，這就是我們鏈接模板和控制器的方式。

<code>>
  <app>></app>>
>
</code>

登入後複製

現在，您可以將URL直接鏈接到組件。

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

登入後複製

這些組件可以從路由參數（例如項目ID）綁定數據，它們的作用是專注於設置路由以加載所需的其它組件。這種對路由定義的看似微小的更改實際上對於Angular 2遷移能力非常重要，但在Angular 1.5中也同樣重要，因為它可以在組件級別更好地封裝模板和控制器。

Angular 1實際上有兩個路由模塊，ngRoute和ngComponentRouter。只有ngComponentRouter支持組件，但它也已棄用。我認為最好的辦法是使用ui-router。

有狀態組件

您為應用程序構建的大多數唯一組件都是有狀態的。在這裡，您實際上將放置應用程序業務邏輯、發出HTTP請求、處理表單和其他有狀態任務。這些組件可能對您的應用程序來說是獨一無二的，它們專注於維護數據而不是視覺呈現。

假設您有一個控制器加載用戶配置文件數據以顯示，並且還有一個相應的模板（此處未顯示）在指令中鏈接在一起。此代碼段可能是完成這項工作的最基本的控制器。

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

登入後複製

使用組件，您可以比以前更好地設計它。理想情況下，您還應該使用服務而不是直接在控制器中使用$http。

<code>.controller('ProfileCtrl', function ($scope, $http) {
  $http.get('/api/profile').then(function (data) {
    $scope.profile = data;
  });
})
.directive('profile', function() {
  return {
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
  }
})
</code>

登入後複製

現在您有一個加載自身數據的組件，因此使其成為有狀態的。這些類型的組件類似於路由組件，只是它們可能不用於鏈接到單個路由。

有狀態組件將使用其他（無狀態）組件來實際呈現UI。此外，您仍然希望使用服務，而不是將數據訪問邏輯直接放在控制器中。

無狀態組件

無狀態組件專注於渲染而不管理業務邏輯，並且不必對任何特定應用程序都是唯一的。例如，大多數用於UI元素（例如表單控件、卡片等）的組件也不會處理加載數據或保存表單之類的邏輯。它們旨在高度模塊化、可重用和隔離。

如果無狀態組件只顯示數據或控制模板中的所有內容，則可能不需要控制器。它們將接受來自有狀態組件的輸入。此示例從有狀態組件（上面的profile示例）獲取值並顯示頭像。

<code>.component('profile', {
  templateUrl: 'views/profile.html',
  controller: function($http) {
    var vm = this;
    // 当组件准备好时调用，见下文
    vm.$onInit = function() {
      $http.get('/api/profile').then(function (data) {
        vm.profile = data;
      });
    };
  }
})
</code>

登入後複製

要使用它，有狀態組件將通過屬性傳遞用戶名，如下所示：<avatar username="vm.profile.username">.</avatar>

您使用的許多庫都是無狀態組件（和可能的服務）的集合。它們當然可以接受配置以修改其行為，但它們並非旨在負責其自身之外的邏輯。

組件應使用單向綁定

這並不是組件的新功能，但在組件中使用它通常很明智。單向綁定的目的是避免將更多工作加載到摘要周期中，這是應用程序性能的主要因素。數據現在流入組件而無需查看其外部（這會導致當今存在的一些耦合問題），並且組件可以簡單地根據該輸入呈現自身。這種設計也適用於Angular 2，這有助於未來的遷移。

在此示例中，title屬性僅根據提供的初始值綁定到組件一次。如果title由某個外部參與者更改，則它不會反映在組件中。表示綁定為單向的語法是使用

<code>>
  <app>></app>>
>
</code>

登入後複製

當title屬性更改時，組件仍將更新，我們將介紹如何偵聽title屬性的更改。建議您盡可能使用單向綁定。

組件應考慮單次綁定

Angular還能夠單次綁定數據，因此您可以優化摘要周期。本質上，Angular將等待提供第一個非未定義的值到綁定中，綁定該值，然後（一旦所有綁定都已解析）從摘要周期中刪除相關的觀察者。這意味著特定綁定不會向未來的摘要循環添加任何處理時間。

這是通過在綁定表達式前面加上::來完成的。如果您知道輸入綁定在生命週期中不會更改，則只有這樣做才有意義。在此示例中，如果title是單向綁定，它將繼續在組件內部更新，但此處的綁定不會更新，因為我們將其指定為單次綁定。

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

登入後複製

組件應使用生命週期事件

您可能已經註意到$onInit函數作為一項新功能。組件具有生命週期和相應的事件，您應該使用這些事件來幫助管理組件的某些方面。

`$onInit()`

組件生命週期的第一步是初始化。此事件在控制器和綁定初始化後運行。您幾乎總是應該使用此方法進行組件設置或初始化。它將確保在運行之前所有值都可用於組件。如果您直接在控制器中訪問綁定值，則不能保證這些值可用。

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

登入後複製

`$postLink()`

下一步是鏈接模板中的任何子元素。當組件初始化時，不能保證它也已渲染在模板中使用的任何子元素。如果您需要以任何方式操作DOM，這一點很重要。一個重要的警告是，異步加載的模板在該事件觸發時可能尚未加載。您可以始終使用模板緩存解決方案來確保模板始終可用。

<code>>
  <app>></app>>
>
</code>

登入後複製

`$onChanges()`

當組件處於活動狀態時，它可能需要對輸入值的更改做出反應。單向綁定仍將更新您的組件，但我們有一個新的$onChanges事件綁定來偵聽輸入何時更改。

對於此示例，假設向組件提供了產品標題和說明。您可以檢測到如下所示的更改。您可以查看傳遞給函數的對象，該對象具有映射到可用綁定的對象，其中包含當前值和先前值。

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

登入後複製

`$onDestroy()`

最後階段是從頁面中移除組件。此事件在控制器及其作用域銷毀之前運行。重要的是清理組件可能創建的或持有內存的任何內容，例如事件偵聽器、觀察者或其他DOM元素。

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

登入後複製

組件應具有明確的API

要使用一組數據配置和初始化組件，組件應使用綁定來接受這些值。這有時被認為是組件API，這只是描述組件接受輸入的方式的不同方法。

這裡的挑戰是為綁定提供簡潔但清晰的名稱。有時開發人員試圖縮短名稱以使其非常簡潔，但這對於組件的使用來說是危險的。假設我們有一個接受股票代碼作為輸入的組件，以下哪一個更好？

<code>.controller('ProfileCtrl', function ($scope, $http) {
  $http.get('/api/profile').then(function (data) {
    $scope.profile = data;
  });
})
.directive('profile', function() {
  return {
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
  }
})
</code>

登入後複製

希望您認為symbol更好。有時開發人員也喜歡作為避免名稱衝突的一種方式來為組件和綁定添加前綴。為組件添加前綴是明智的，例如md-toolbar是Material工具欄，但為所有綁定添加前綴會變得冗長，應避免。

組件應發出事件

為了與其他組件通信，組件應發出自定義事件。有很多使用服務和雙向數據綁定的示例來同步組件之間的數

據，但事件是更好的設計選擇。事件作為與頁面通信的一種方式效率要高得多（並且是JavaScript語言以及它在Angular 2中的工作方式的基礎部分，這並非巧合）。

Angular中的事件可以使用$emit（向上到作用域樹）或$broadcast（向下到作用域樹）。這是一個快速示例事件的實際應用。

<code>.component('profile', {
  templateUrl: 'views/profile.html',
  controller: function($http) {
    var vm = this;
    // 当组件准备好时调用，见下文
    vm.$onInit = function() {
      $http.get('/api/profile').then(function (data) {
        vm.profile = data;
      });
    };
  }
})
</code>

登入後複製

您需要在組件之間進行通信的主要有兩種情況：在您了解的組件之間以及您不了解的組件之間。為了說明這種區別，讓我們假設我們有一組組件來幫助管理頁面上的選項卡，以及一個具有相應幫助頁面鏈接的工具欄。

<code>.component('avatar', {
  template: '<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975605585460.png" class="lazy" ng- alt="建造優質角1.5組件的指南" >',
  bindings: {
    username: '  },
  controllerAs: 'vm'
})
</code>

登入後複製

在這種情況下，my-tabs和my-tab組件可能彼此了解，因為它們協同工作以創建一組三個不同的選項卡。但是，my-toolbar組件超出了它們的認知範圍。

每當選擇不同的選項卡（這將是my-tab組件實例上的一個事件）時，my-tabs組件都需要知道，以便它可以調整選項卡的顯示以顯示該實例。 my-tab組件可以向上發出事件到父my-tabs組件。這種類型的通信就像兩個協同工作以創建單個功能（選項卡式界面）的組件之間的內部通信。

但是，如果my-toolbar想要知道當前選擇了哪個選項卡，以便它可以根據可見內容更改幫助按鈕呢？ my-tab事件永遠不會到達my-toolbar，因為它不是父級。因此，另一個選擇是使用$rootScope向下發出整個組件樹的事件，這允許任何組件偵聽和React。這裡潛在的缺點是您的事件現在到達每個控制器，如果另一個組件使用相同的事件名稱，您可能會觸發意外的影響。

確定哪種方法適合您的用例，但是每當另一個組件可能需要了解事件時，您可能都希望使用第二個選項向整個組件樹發出事件。