Обновление с AngularJS до Angular

Angular - это имя для Angular сегодня и завтра. AngularJS - название для всех версий 1.x Angular.

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

Некоторые приложения будет легче обновлять, чем другие, и есть много способов сделать это проще для себя. Можно подготовить и согласовать приложения AngularJS с Angular еще до начала процесса обновления. Все эти подготовительные этапы направлены на то, чтобы сделать код более отделенным, более обслуживаемым и лучше согласованным с современными инструментами разработки. Это означает, что помимо упрощения обновления вы также улучшите существующие приложения AngularJS.

Один из ключей к успешному обновлению - делать это постепенно, запустив две интегрированные среды в одном приложении и портировав компоненты AngularJS на Angular один за другим. Это позволяет модернизировать даже большие и сложные приложения, не мешая другим бизнесам, потому что работа может выполняться совместно и распределяться в течение определенного периода времени.

подготовка

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

Следуйте Руководству по стилю AngularJS

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

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

В частности, есть несколько правил, которые значительно облегчат выполнение инкрементального обновления с помощью модуля Angular upgrade / static:

• Правило 1 гласит, что в каждом файле должен быть один компонент. Это не только упрощает навигацию и поиск компонентов, но также позволяет нам переносить их между языками и средами по одному. В этом примере приложения каждый контроллер, компонент, служба и фильтр находятся в своем собственном исходном файле.
• Правила Folders-by-Feature Structure и Modularity определяют схожие принципы на более высоком уровне абстракции: разные части приложения должны находиться в разных каталогах и NgModules.

Когда приложение таким образом размещает функцию для каждой функции, ее также можно переносить по одной функции за раз. Для приложений, которые еще не выглядят так, применение правил в руководстве по стилю AngularJS является очень рекомендуемым этапом подготовки. И это не только ради обновления - это просто солидный совет в целом!

Использование загрузчика модулей

Когда вы разбиваете код приложения на один компонент на файл, вы часто получаете структуру проекта с большим количеством относительно небольших файлов. Это гораздо более удобный способ организации вещей, чем небольшое количество больших файлов, но он не работает так хорошо, если вам нужно загрузить все эти файлы на страницу HTML с тегами <script>. Особенно, когда вы также должны поддерживать эти теги в правильном порядке. Вот почему стоит начать использовать загрузчик модулей.

Использование загрузчика модулей, такого как SystemJS, Webpack или Browserify, позволяет нам использовать встроенные модульные системы TypeScript или ES2015. Вы можете использовать функции импорта и экспорта, которые явно указывают, какой код может и будет совместно использоваться различными частями приложения. Для приложений ES5 вы можете использовать функции require CommonSS и функции module.exports. В обоих случаях загрузчик модуля позаботится о загрузке всего кода, необходимого приложению, в правильном порядке.

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

Миграция на TypeScript

Если часть плана обновления Angular также предусматривает использование TypeScript, имеет смысл ввести компилятор TypeScript даже до начала самого обновления. Это означает, что во время фактического обновления есть одна вещь, о которой нужно учиться и думать. Это также означает, что вы можете начать использовать функции TypeScript в своем коде AngularJS.

Поскольку TypeScript является расширенным набором ECMAScript 2015, который, в свою очередь, является расширенным набором ECMAScript 5, «переключение» на TypeScript не обязательно требует чего-то большего, чем просто установка компилятора TypeScript и переименование файлов из * .js в * .ts. Но делать это, конечно, не очень полезно и не интересно. Дополнительные шаги, подобные следующим, могут дать нам гораздо больше отдачи:

• Для приложений, использующих загрузчик модулей, импорт и экспорт TypeScript (которые на самом деле представляют собой импорт и экспорт ECMAScript 2015) могут использоваться для организации кода в модули.
• Аннотации типов могут постепенно добавляться к существующим функциям и переменным для определения их типов и получения таких преимуществ, как проверка ошибок во время сборки, отличная поддержка автозаполнения и встроенная документация.
• Новые функции JavaScript в ES2015, такие как функции стрелок, разрешения и спуски, параметры функций по умолчанию и назначения деструктурирования, также могут постепенно добавляться, чтобы сделать код более выразительным.
• Сервисы и контроллеры можно превратить в классы. Таким образом, они станут на шаг ближе к тому, чтобы стать классами обслуживания и компонентов Angular, что облегчит жизнь после обновления.

Использование директив компонента

В Angular компоненты являются основным примитивом, из которого строятся пользовательские интерфейсы. Вы определяете различные части пользовательского интерфейса как компоненты и объединяете их в полноценный пользовательский интерфейс.

Вы также можете сделать это в AngularJS, используя директивы компонента. Это директивы, которые определяют свои собственные шаблоны, контроллеры и привязки ввода / вывода - то же самое, что определяют компоненты Angular. Приложения, созданные с помощью директив компонентов, гораздо проще перенести в Angular, чем приложения, созданные с использованием низкоуровневых функций, таких как ng-controller, ng-include и наследование областей действия.

Чтобы быть совместимым с Angular, директива компонента AngularJS должна конфигурировать эти атрибуты:

• ограничить: «E». Компоненты обычно используются в качестве элементов.
• область действия: {} - область изоляции. В Angular компоненты всегда изолированы от своего окружения, и вы должны делать это и в AngularJS.
• bindToController: {}. Компонентные входы и выходы должны быть привязаны к контроллеру вместо использования $ scope.
• контроллер и контроллер как. Компоненты имеют свои собственные контроллеры.
• template или templateUrl. Компоненты имеют свои собственные шаблоны.

Директивы компонентов могут также использовать следующие атрибуты:

• transclude: true / {}, если компонент должен включать содержимое из другого места.
• Требуется, если компонент должен связаться с контроллером какого-либо родительского компонента.

Директивы компонентов не должны использовать следующие атрибуты:

• компиляции. Это не будет поддерживаться в Angular.
• replace: Angular никогда не заменяет элемент компонента шаблоном компонента. Этот атрибут также не рекомендуется в AngularJS.
• приоритет и терминал. Хотя компоненты AngularJS могут использовать их, они не используются в Angular, и лучше не писать код, который полагается на них.

Директива компонента AngularJS, которая полностью соответствует архитектуре Angular, может выглядеть примерно так:

export function heroDetailDirective() {
  return {
    restrict: 'E',
    scope: {},
    bindToController: {
      hero: '=',
      deleted: '&'
    },
    template: `
      <h2>{{$ctrl.hero.name}} details!</h2>
      <div><label>id: </label>{{$ctrl.hero.id}}</div>
      <button ng-click="$ctrl.onDelete()">Delete</button>
    `,
    controller: function() {
      this.onDelete = () => {
        this.deleted({hero: this.hero});
      };
    },
    controllerAs: '$ctrl'
  };
}

Демонстрация в реальном времени:

См. Руководство- герой- t Pen по w3resource ( @ w3resource ) в CodePen .

Предыдущий: Обновление для производительности
Next: Рендеринг на стороне сервера (SSR): введение в Angular Universal