AngularJS
Переход к угловому 2+

Вступление

Преобразование вашего приложения AngularJS в компонентно-ориентированную структуру

В новой структуре углов Компоненты являются основными строительными блоками, которые составляют пользовательский интерфейс. Таким образом, один из первых шагов, который помогает приложению AngularJS переноситься в новый Angular, состоит в том, чтобы реорганизовать его в более ориентированную на компонент структуру.

Компоненты были также представлены в старой версии AngularJS, начиная с версии 1.5+ . Использование компонентов в приложении AngularJS не только приблизит его структуру к новому угловому 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>

Обратите внимание, что теперь мы myUserList на переменную myUserList , которая принадлежит контроллеру, используя $ctrl.myUserList из html вместо $scope.myUserList .

Это потому, что, как вы, вероятно, выяснили после прочтения документации, $ctrl в шаблоне теперь относится к функции контроллера.

Как насчет контроллеров и маршрутов?

В случае, если ваш контроллер привязан к шаблону с использованием системы маршрутизации вместо ng-controller , поэтому, если у вас есть что-то вроде этого:

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

вы можете просто изменить свою декларацию состояния:

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

Что дальше?

Теперь, когда у вас есть компонент, содержащий ваше приложение (независимо от того, содержит ли оно все приложение или его часть, например представление), теперь вы должны начать разбивать свой компонент на несколько вложенных компонентов, обертывая его части на новые подкомпоненты , и так далее.

Вы должны начать использовать компоненты Component, такие как

• Входы и выходы

• крючки жизненного цикла, такие как $onInit() , $onChanges() и т. д. ...

После прочтения документации по компонентам вы уже должны знать, как использовать все эти компоненты, но если вам нужен конкретный пример реального простого приложения, вы можете это проверить.

Кроме того, если внутри контроллера вашего компонента есть некоторые функции, которые содержат много логического кода, хорошая идея может быть рассмотрена, чтобы переместить эту логику в сервисы .

Заключение

Принятие основанного на компонентах подхода подталкивает ваш AngularJS на один шаг ближе, чтобы перенести его в новую угловую структуру, но также делает ее лучше и намного более модульной.

Конечно, есть много других шагов, которые вы можете сделать, чтобы перейти в новое направление Angular 2+, которое я приведу в следующих примерах.

Представляем модули Webpack и ES6

Используя загрузчик модуля, такой как Webpack, мы можем воспользоваться встроенной системой модулей, доступной в ES6 (а также в TypeScript ). Затем мы можем использовать функции импорта и экспорта, которые позволяют нам указать, какие фрагменты кода мы можем разделить между различными частями приложения.

Когда мы принимаем наши приложения в производство, модульные погрузчики также облегчают их упаковку в производственные комплекты с включенными батареями.