Обновление для Производительности

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

В этом руководстве описываются некоторые встроенные инструменты для эффективной миграции проектов AngularJS на платформу Angular, по одной части за раз. Он использует вспомогательную функцию downgradeModule () вместо популярного класса UpgradeModule. Это влияет на то, как приложение загружается и как распространяется обнаружение изменений. Он позволяет вам постепенно обновляться, одновременно повышая скорость ваших гибридных приложений и используя самые последние приложения Angular в AngularJS на ранних этапах обновления.

подготовка

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

Обновление с помощью ngUpgrade

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

Как работает ngUpgrade

Независимо от того, выберете ли вы downgradeModule () или UpgradeModule, основные принципы обновления, ментальная модель гибридных приложений и то, как вы используете утилиты обновления / статические утилиты, остаются прежними.

Обнаружение изменений с помощью downgradeModule ()

Одно из ключевых различий между downgradeModule () и UpgradeModule связано с обнаружением изменений и тем, как они распространяются между двумя платформами.

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

downgradeModule (), с другой стороны, избегает явного запуска обнаружения изменений, если только он не знает, что другая часть приложения заинтересована в изменениях. Например, если пониженный компонент определяет @Input (), есть вероятность, что приложение должно знать об изменении этого значения. Таким образом, downgradeComponent () автоматически запускает обнаружение изменений в этом компоненте.

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

Если вы хотите, чтобы определенный фрагмент кода инициировал обнаружение изменений в части приложения AngularJS, вам нужно обернуть его в область действия. $ Apply (). Аналогично, для запуска обнаружения изменений в Angular вы должны использовать ngZone.run ().

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

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

Использование downgradeModule ()

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

Их детали сильно отличаются по архитектуре и реализации. В AngularJS вы создаете модуль, указывая его имя и зависимости с помощью angular.module (). Затем вы можете добавлять активы, используя различные методы. В Angular вы создаете класс, украшенный декоратором NgModule, который описывает активы в метаданных.

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

По большей части вы указываете модули так же, как для обычного приложения. Затем вы используете помощники обновления / статики, чтобы две структуры знали об активах, которые они могут использовать друг от друга. Это известно как «обновление» и «понижение».

Определения:

• Обновление: Активизация доступа к AngularJS-компоненту, такому как компонент или служба, для Angular-части приложения.
• Понижение рейтинга: создание ресурса Angular, такого как компонент или служба, доступным для части приложения AngularJS.

Важной частью взаимосвязанных зависимостей является соединение двух основных модулей вместе. Вот тут-то и приходит downgradeModule (). Используйте его для создания модуля AngularJS, который вы можете использовать в качестве зависимости в своем основном модуле AngularJS, который загрузит ваш основной модуль Angular и запустит Angular-часть гибридного приложения. В некотором смысле он «понижает» модуль Angular до модуля AngularJS.

Однако следует отметить несколько вещей:

1. Вы не передаете модуль Angular напрямую в downgradeModule (). Все, что нужно downgradeModule () - это «рецепт», например, фабричная функция, для создания экземпляра для вашего модуля.
2. Модуль Angular не создается, пока приложение действительно не нуждается в нем.

Ниже приведен пример того, как вы можете использовать downgradeModule () для связи двух модулей.

// Import `downgradeModule()`.
import { downgradeModule } from '@angular/upgrade/static';
// Use it to downgrade the Angular module to an AngularJS module.
const downgradedModule = downgradeModule(MainAngularModuleFactory);
// Use the downgraded module as a dependency to the main AngularJS module.
angular.module('mainAngularJsModule', [
  downgradedModule
]);

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

См. Pen LoZpbE от w3resource ( @ w3resource ) в CodePen .

Указание фабрики для углового модуля

Как упоминалось ранее, downgradeModule () должен знать, как создать экземпляр модуля Angular. Нужен рецепт. Вы определяете этот рецепт, предоставляя заводскую функцию, которая может создать экземпляр модуля Angular. downgradeModule () принимает два типа заводских функций:

1. NgModuleFactory
2. (extraProviders: StaticProvider []) => Обещание <NgModuleRef>

Когда вы передаете NgModuleFactory, downgradeModule () использует его для создания экземпляра модуля с помощью bootstrapModuleFactory () platformBrowser, который совместим с опережающей (AOT) компиляцией. Компиляция AOT помогает ускорить загрузку ваших приложений. Для получения дополнительной информации о AOT и о том, как создать NgModuleFactory, см. Руководство по своевременной компиляции.

В качестве альтернативы вы можете передать простую функцию, которая, как ожидается, будет возвращать разрешение обещания в NgModuleRef (т.е. экземпляр вашего модуля Angular). Функция вызывается с массивом дополнительных провайдеров, которые, как ожидается, будут доступны в возвращенном инжекторе NgModuleRef. Например, если вы используете platformBrowser или platformBrowserDynamic, вы можете передать им массив extraProviders:

const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(MainAngularModule);
};
// or
const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowser(extraProviders);
  return platformRef.bootstrapModuleFactory(MainAngularModuleFactory);
}; 

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

См. Pen eazpBb от w3resource ( @ w3resource ) в CodePen .

Использование NgModuleFactory требует меньшего количества шаблонов и является хорошим вариантом по умолчанию, так как он поддерживает AOT "из коробки". Использование пользовательской функции требует немного больше кода, но дает вам большую гибкость.

Создание модуля Angular по требованию

Другое ключевое отличие между downgradeModule () и UpgradeModule заключается в том, что последний требует от вас инициализации обоих модулей AngularJS и Angular. Это означает, что вы должны заплатить за создание экземпляра Angular-части приложения, даже если вы не используете какие-либо ресурсы Angular позже. downgradeModule () снова менее агрессивен. Он будет создавать экземпляр Angular только тогда, когда это требуется в первый раз; то есть, как только ему нужно создать пониженный компонент.

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

Вот несколько примеров:

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

Начальная загрузка с downgradeModule ()

Как вы уже догадались, вам не нужно ничего менять при загрузке существующего приложения AngularJS. В отличие от UpgradeModule? Который требует дополнительных шагов? downgradeModule () может позаботиться о начальной загрузке модуля Angular, если вы предоставите рецепт.

Чтобы начать использовать любые API-интерфейсы обновления / статики, вам все равно нужно загрузить платформу Angular, как в обычном приложении Angular. Вы можете увидеть, как это можно сделать с помощью SystemJS, следуя инструкциям в руководстве по установке, выборочно копируя код из репозитория QuickStart github.

Вам также необходимо установить пакет @ angular / upgrade через npm install @ angular / upgrade --save и добавить сопоставление для пакета @ angular / upgrade / static в файле system.config.js.

'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

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

Смотрите Pen PvzPeO от w3resource ( @ w3resource ) на CodePen .

Затем создайте файл app.module.ts и добавьте следующий класс NgModule в файл app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports: [
    BrowserModule
  ]
})
export class MainAngularModule {
  // Empty placeholder method to satisfy the `Compiler`.
  ngDoBootstrap() {}
}

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

См. Pen zQBvwQ от w3resource ( @ w3resource ) в CodePen .

Этот минимальный NgModule импортирует BrowserModule, модуль, который должно быть в каждом браузерном приложении Angular. Он также определяет пустой метод ngDoBootstrap (), чтобы компилятор не возвращал ошибки. Это необходимо, потому что у модуля не будет объявления начальной загрузки на его декораторе NgModule.

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

Теперь вы можете связать AngularJS и Angular модули вместе, используя downgradeModule () в файле app.module.ts, как показано ниже:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { downgradeModule } from '@angular/upgrade/static';
const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(MainAngularModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.module('mainAngularJsModule', [
  downgradedModule
]);

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

См. Pen wbWKdP от w3resource ( @ w3resource ) на CodePen .

Существующий код AngularJS работает как прежде, и вы готовы начать добавление кода Angular.

Использование компонентов и инъекций

Различия между downgradeModule () и UpgradeModule заканчиваются здесь. Остальные API и концепции обновления / статики работают одинаково для обоих типов гибридных приложений. Смотрите Обновление от AngularJS, чтобы узнать о:

• Использование угловых компонентов из кода AngularJS.
  ПРИМЕЧАНИЕ. Если вы понижаете класс нескольких модулей, вам нужно указать имя пониженного класса, к которому принадлежит каждый компонент, при вызове downgradeComponent ().
• Использование AngularJS Компонент Директивы из Углового кода.
• Проецирование содержимого AngularJS в угловые компоненты.
• Преобразование углового содержимого в директивы AngularJS Component.
• Создание зависимостей AngularJS для инъекций в Angular.
• Создание угловых зависимостей для инъекций в AngularJS.
  ПРИМЕЧАНИЕ. Если вы понижаете класс нескольких модулей, при вызове downgradeInjectable () необходимо указать имя устаревшего модуля, к которому относится каждый инъецируемый модуль.

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

Например, можно использовать сервис пониженной версии в обновленном компоненте, который используется только из устаревшего компонента Angular, предоставленного тем же модулем Angular, что и инъецируемый, но не разрешено использовать его в компоненте AngularJS, который может использоваться независимо от Angular или используйте его в устаревшем компоненте Angular из другого модуля.

Использование своевременной компиляции с гибридными приложениями

Вы можете воспользоваться преимуществом предварительной компиляции (AOT) в гибридных приложениях, как и в любом другом приложении Angular. Настройка гибридного приложения в большинстве случаев аналогична описанной в руководстве по предварительной компиляции, за исключением различий в index.html и main-aot.ts.

AOT должен загрузить любые файлы AngularJS, которые находятся в тегах <script> в AngularJS index.html. Простой способ скопировать их - добавить каждый в файл copy-dist-files.jsfile.

Вам также нужно передать сгенерированный MainAngularModuleFactory в downgradeModule () вместо пользовательской функции начальной загрузки в файле app / main-aot.ts:

import { downgradeModule } from '@angular/upgrade/static';
import { MainAngularModuleNgFactory } from '../aot/app/app.module.ngfactory';
const downgradedModule = downgradeModule(MainAngularModuleNgFactory);
angular.module('mainAngularJsModule', [
  downgradedModule
]);

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

Смотрите Pen pmbjeO от w3resource ( @ w3resource ) в CodePen .

И это все, что вам нужно сделать, чтобы получить все преимущества AOT для гибридных приложений Angular.

Заключение

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

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

Подводя итог, можно выделить следующие ключевые факторы downgradeModule ():

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

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

Вам не нужно менять способ загрузки приложения AngularJS.

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

Предыдущая: Отображение данных
Далее: Обновление с AngularJS до Angular