将 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+方向，我将在下面的示例中列出。