UpgradeModule

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

Часть библиотеки upgrade/static для гибридных приложений с поддержкой обновления и компиляции AOT

Пакет upgrade/static содержит вспомогательные средства, позволяющие совместно использовать компоненты AngularJS и Angular в гибридном приложении с поддержкой обновления, которое поддерживает компиляцию AOT.

В частности, классы и функции модуля upgrade/static позволяют выполнять следующие действия:

1. Создать директиву Angular, которая оборачивает и предоставляет компонент AngularJS для использования в шаблоне Angular. См. UpgradeComponent.
2. Создать директиву AngularJS, которая оборачивает и предоставляет компонент Angular для использования в шаблоне AngularJS. См. downgradeComponent.
3. Создать поставщик корневого инжектора Angular, который оборачивает и предоставляет сервис AngularJS для внедрения в контекст Angular. См. ниже раздел Upgrading an AngularJS service.
4. Создать сервис AngularJS, который оборачивает и предоставляет внедряемую сущность Angular для внедрения в контекст AngularJS. См. downgradeInjectable.
5. Запустить гибридное приложение Angular, в котором обе платформы работают совместно в одном приложении.

import {UpgradeModule} from '@angular/upgrade/static';

См. также приведенный ниже раздел examples.

Ментальная модель

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

1. В одном приложении работают две независимые платформы, и каждая из них рассматривает другую как черный ящик.
2. Каждый DOM-элемент на странице принадлежит ровно одной платформе. Владельцем является платформа, создавшая элемент. Каждая платформа обновляет и использует только собственные DOM-элементы, игнорируя остальные.
3. Директивы AngularJS всегда выполняются в кодовой базе платформы AngularJS независимо от того, где они созданы.
4. Компоненты Angular всегда выполняются в кодовой базе платформы Angular независимо от того, где они созданы.
5. Компонент AngularJS можно «повысить» до компонента Angular. Для этого определяется директива Angular, которая запускает компонент AngularJS в его месте в DOM. См. UpgradeComponent.
6. Компонент Angular можно «понизить» до компонента AngularJS. Для этого определяется директива AngularJS, которая запускает компонент Angular в его месте в DOM. См. downgradeComponent.
7. При создании «повышенного» или «пониженного» компонента его корневой элемент принадлежит платформе, выполняющей создание. Затем другая платформа создает представление этого компонента и становится его владельцем.
   1. Это означает, что привязки компонента всегда соответствуют семантике платформы, выполняющей создание.
   2. Атрибуты DOM анализируются платформой, которой принадлежит текущий шаблон. Поэтому в шаблонах AngularJS необходимо использовать kebab-case, а в шаблонах AngularJS — camelCase.
   3. Однако в синтаксисе привязок шаблона всегда используется стиль Angular, например квадратные скобки ([...]) для привязки свойства.
8. Сначала загружается Angular, затем — AngularJS. Корневой компонент приложения всегда принадлежит AngularJS.
9. Новое приложение работает в зоне Angular, поэтому вызовы $apply() больше не нужны.

Класс UpgradeModule

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

• Основные сервисы AngularJS
  Импорт этого NgModule добавит в корневой инжектор поставщики основных сервисов AngularJS.

• Запуск
  Экземпляр этого класса во время выполнения содержит метод bootstrap(), который используется для запуска модуля AngularJS верхнего уровня на элементе DOM в гибридном приложении с поддержкой обновления.

  Он также содержит свойства для доступа к root injector, загрузочной NgZone и $injector AngularJS.

Примеры

Импортируйте UpgradeModule в свой корневой NgModule Angular.

// This NgModule represents the Angular pieces of the application
@NgModule({
  declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
  providers: [
    HeroesService,
    // Register an Angular provider whose value is the "upgraded" AngularJS service
    {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']},
  ],
  // We must import `UpgradeModule` to get access to the AngularJS core services
  imports: [BrowserModule, UpgradeModule],
})
export class Ng2AppModule {
}

Затем внедрите UpgradeModule в свой NgModule Angular и используйте его для запуска модуля AngularJS верхнего уровня в методе ngDoBootstrap().

export class Ng2AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    // We bootstrap the AngularJS app.
    this.upgrade.bootstrap(document.body, [ng1AppModule.name]);
  }
}

Наконец, запустите весь процесс, загрузив корневой NgModule Angular.

// We bootstrap the Angular module as we would do in a normal Angular app.
// (We are using the dynamic browser platform as this example has not been compiled AOT.)
platformBrowser().bootstrapModule(Ng2AppModule);

Повышение сервиса AngularJS

Специального API для повышения сервиса AngularJS нет. Вместо этого выполните следующие действия:

Предположим, у вас есть сервис AngularJS:

export class TextFormatter {
  titleCase(value: string) {
    return value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase());
  }
}

// This AngularJS service will be "upgraded" to be used in Angular
ng1AppModule.service('textFormatter', [TextFormatter]);

Затем определите поставщик Angular, который будет включен в свойство providers вашего NgModule.

// Register an Angular provider whose value is the "upgraded" AngularJS service
    {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']},

После этого можно использовать «повышенный» сервис AngularJS, внедрив его в компонент или сервис Angular.

constructor(textFormatter: TextFormatter) {
    // Change all the hero names to title case, using the "upgraded" AngularJS service
    this.heroes.forEach((hero: Hero) => (hero.name = textFormatter.titleCase(hero.name)));
  }