Ленивая загрузка с Angular Dart

Малоизвестный факт: Angular Dart поддерживает отложенную загрузку с 1.0.

Что для вас делает отложенная загрузка (называемая в Dart отложенной загрузкой)?

• Вы можете разбить свое приложение на небольшие зависимые части.
• Работает в любом браузере - автоматически, без полифилов
• Используйте полностью типизированный код Dart - даже ваши отложенные библиотеки напечатаны

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

В этом руководстве предполагается, что вы уже знакомы с Дротиком и Угловым дротиком.

Начиная

Я использую смесь IntelliJ и Visual Studio code с плагином Dart. Оба подходят для следования этому руководству - они используют сервер анализа Dart для предоставления статических предупреждений, автозаполнения и т. Д. - или вы можете использовать свой любимый текстовый редактор.

Создание нового проекта

Я мог бы начать с совершенно пустой папки, но я ленив - давайте воспользуемся рабочим сцены, чтобы автоматически сгенерировать строительные леса для нового проекта Dart. Мы получим хорошую настройку файловой структуры за секунды:

Если вы хотите скопировать и вставить использованные мной команды:

$ pub global activate stagehand
$ mkdir angular2_lazy_example
$ cd angular2_lazy_example
$ stagehand web-angular

Давайте также получим все наши зависимости:

$ pub получить

Затем я открыл angular2_lazy_example в IntelliJ:

И для предварительного просмотра своего приложения я запускаю pub serve:

Хорошо, но это касается отложенной загрузки…

Да да это. И это так же просто, как и описанные выше действия. Давайте добавим новый компонент ReleaseListComponent - он загрузит список самых последних выпусков Angular Dart и отобразит их для нас.

Создание нашего нового компонента

Напишем release_list_component.dart в нашей lib/ папке:

import 'dart:html';
import 'dart:convert';

import 'package:angular2/angular2.dart';

@Component(
  selector: 'release-list',
  templateUrl: 'release_list_component.html',
  styleUrls: const ['release_list_component.css'],
)
class ReleaseListComponent implements OnInit {
  static const _apiUrl = 
      'https://api.github.com/repos/dart-lang/angular2/tags';

  List<GithubTag> releases = const [];

  @override
  ngOnInit() async {
    final tags = JSON.decode(await HttpRequest.getString(_apiUrl));
    releases = (tags as List<Map>)
        .map((t) => new GithubTag(t['name'], t['commit']['url']))
        .toList();
  }
}

class GithubTag {
  final String name;
  final String url;

  GithubTag(this.name, this.url);
}

И давайте добавим release_list_component.html:

<ul>
  <li *ngFor="let release of releases">
    <a [href]="release.url">{{release.name}}</a>
  </li>
</ul>

И release_list_component.css:

ul {
    margin: 0;
    padding: 0;
}

ul li {
    color: #1e90ff;
}

Наконец, давайте отобразим компонент. Измените app_component.dart:

import 'package:angular2/core.dart';

import 'release_list_component.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [ReleaseListComponent],
)
class AppComponent {}

И app_component.html:

<h1>My First Angular 2 App</h1>
<release-list></release-list>

Ничего не загружено с задержкой - пока. Давайте посмотрим на нашу временную шкалу Chrome:

Разделение списка релизов

Что, если бы мы хотели загрузить список выпусков только после начальной загрузки страницы? Легкий!

Давайте изменим наш app_component.dart, чтобы использовать DynamicComponentLoader, что позволяет нам асинхронно загружать компонент по его class типу.

import 'package:angular2/core.dart';

import 'release_list_component.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
)
class AppComponent implements OnInit {
  final DynamicComponentLoader _loader;
  final ViewContainerRef _location;

  AppComponent(this._loader, this._location);

  @override
  ngOnInit() async {
    _loader.loadNextToLocation(ReleaseListComponent, _location);
  }
}

(Я также удалил <releases-list> из app_component.html)

Наконец, давайте сделаем его фактически загруженным. Это самое интересное!

import 'release_list_component.dart' deferred as release_list;
@override
ngOnInit() async {
  await release_list.loadLibrary();
  _loader.loadNextToLocation(
    release_list.ReleaseListComponent, _location);
}

Всего за несколько минут мы отложили / лениво загрузили наш код Dart, HTML-шаблон (предварительно скомпилированный в код Dart) и соответствующий CSS - все с помощью пары строк кода.

Отсюда

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

Дайте мне знать в комментариях или где-нибудь еще, если вам нужна дополнительная информация.

Изменить: окончательный код на https://github.com/matanlurey/angular2_lazy_example