原文地址：medium.com/@matanlurey…

原文作者：medium.com/@matanlurey

发布时间：2016年11月14日 - 4分钟阅读

一个鲜为人知的事实是：Angular Dart从1.0开始就支持懒惰加载。

懒惰加载（在Dart中称为延迟加载）对你有什么好处？

• 你可以将你的应用程序分解成小的、依赖性强的部分。
• 它可以在任何浏览器上工作--自动运行，不需要进行polyfills。
• 使用完全类型化的Dart代码--甚至你的延迟库也是类型化的。

别担心--你不需要任何额外的插件、加载器、构建步骤或任何形式的依赖。它是完全内置的（尽管，我承认相对没有文档--我们正在努力）。

本教程希望你已经熟悉Dart和Angular Dart。

入门

我混合使用IntelliJ和Visual Studio Code与Dart插件。两者都可以遵循本教程--它们使用Dart分析服务器来提供静态警告、自动完成等--或者你可以使用你最喜欢的文本编辑器。

创建一个新项目

我可以从一个完全空的文件夹开始，但我很懒--让我们使用stagehand为一个新的Dart项目自动生成脚手架。我们将在几秒钟内得到一个漂亮的文件结构设置。

在大约5秒内创建一个新的Angular Dart应用程序。

如果你想复制粘贴我使用的命令。

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

让我们也得到所有的依赖关系。

$ pub get

然后我在IntelliJ中打开了angular2_lazy_example。

我新创建的Angular Dart应用。是不是很棒？

而为了预览我的应用，我运行pub serve。

在开发时，我使用Dartium预览我的代码。

好吧，但这应该是关于延迟加载... ...

是的，是的，就是这样。而且就像上面的步骤一样简单。让我们添加一个新的组件，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>

我们已经添加了我们的 ReleaseListComponent，但它还没有延迟加载

没有任何东西被延迟加载--还没有。让我们看看我们的Chrome时间线。

使用dart2js，我们已经在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);
  }
}

(我还从app_component.html中删除了<releases-list>)

最后，让我们让它真正的延时加载。这是最有趣的部分

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中最基本的延迟/懒加载的例子。

---

通过www.DeepL.com/Translator （免费版）翻译