將 AngularJS 應用程式轉換為面向元件的結構

Created: November-22, 2018

在新的 Angular 框架中，元件是構成使用者介面的主要構建塊。因此，幫助 AngularJS 應用程式遷移到新 Angular 的第一步是將其重構為更加面向元件的結構。

從版本 1.5+ 開始，舊的 AngularJS 中也引入了元件。在 AngularJS 應用程式中使用元件不僅可以使其結構更接近新的 Angular 2+，而且還可以使其更加模組化，更易於維護。

在進一步討論之前，我建議你檢視有關元件的官方 AngularJS 文件頁面，其中詳細說明了它們的優點和用法。

我想提一些關於如何將舊的 ng-controller 導向程式碼轉換為新的 component 導向風格的技巧。

開始將你的應用分解為元件

所有面向元件的應用程式通常都包含一個或幾個包含其他子元件的元件。那麼為什麼不建立第一個只包含你的應用程式（或它的一大部分）的元件。

假設我們有一段程式碼分配給控制器，名為 UserListController，我們想要建立一個元件，我們將其命名為 UserListComponent。

目前的 HTML：

<div ng-controller="UserListController as listctrl">
    <ul>
        <li ng-repeat="user in myUserList">
            {{ user }}
        </li>
    </ul>
</div>

目前的 JavaScript：

app.controller("UserListController", function($scope, SomeService) {

    $scope.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

新的 HTML：

<user-list></user-list>

新的 JavaScript：

app.component("UserList", {
    templateUrl: 'user-list.html',
    controller: UserListController
});

function UserListController(SomeService) {

    this.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

注意我們如何不再將 $scope 注入控制器功能，我們現在宣告 this.myUserList 而不是 $scope.myUserList;

新模板檔案 user-list.component.html：

<ul>
    <li ng-repeat="user in $ctrl.myUserList">
        {{ user }}
    </li>
</ul>

注意我們現在如何使用來自 html 而不是 $scope.myUserList 的 $ctrl.myUserList 來引用屬於控制器的變數 myUserList。

這是因為，正如你在閱讀文件後想到的那樣，模板中的 $ctrl 現在指的是控制器功能。

控制器和路線怎麼樣？

如果你的控制器使用路由系統而不是 ng-controller 繫結到模板，那麼如果你有這樣的東西：

$stateProvider
  .state('users', {
    url: '/users',
    templateUrl: 'user-list.html',
    controller: 'UserListController'
  })
  // ..

你可以把你的狀態宣告改為：

$stateProvider
    .state('users', {
      url: '/',
      template: '<user-list></user-list>'
    })
    // ..

下一步是什麼？

既然你有一個包含應用程式的元件（無論它包含整個應用程式還是其中的一部分，如檢視），你現在應該開始將元件拆分為多個巢狀元件，方法是將其部分包裝到新的子元件中，等等。

你應該開始使用元件功能

輸入和輸出繫結
生命週期鉤子，如 $onInit()，$onChanges() 等……

閱讀元件文件後，你應該已經知道如何使用所有這些元件功能，但如果你需要一個真正簡單的應用程式的具體示例，你可以檢查它。

此外，如果在元件的控制器內部有一些包含大量邏輯程式碼的函式，那麼可以考慮將該邏輯轉移到服務中。

結論

採用基於元件的方法使你的 AngularJS 更接近將其遷移到新的 Angular 框架，但它也使它更好，更模組化。

當然，還有很多其他步驟可以進一步進入新的 Angular 2+方向，我將在下面的示例中列出。