Angular2依赖的解释

Question

我想知道你们中是否有人可以解释 Angular2 使用的依赖项。到目前为止，我发现 angular2 总是使用以下内容：

RxJs
Angular2 Polyfills
ZoneJS

你能用简单的话解释一下他们每个人的职责是什么，我们为什么需要这些？

谢谢

Answer 1

• Rxjs 提供了响应式编程概念的实现。 Angular2 基于它用于组件中的自定义事件（EventEmitter 扩展了 Subject 的类）和它的 HTTP 支持（如get、post 等方法）。

  李>

• Angular2 的angular2-polyfills.js 文件包含 ZoneJS 和 Reflect-metadata。 ZoneJS 是一个触发 Angular2 更改检测的工具（有关更多详细信息，请参阅此问题：What is the Angular2 equivalent to an AngularJS $watch?）。 Reflect-metadata 是在类上设置元数据。 Angular2 装饰器使用它来根据参数定义元数据。例如，一个组件的配置（选择器，模板，...）。

• 您还可以使用 polyfill 来完成对 API 的部分支持（例如 ES6）。

• 另一个重要的工具是 SystemJS，它是管理模块的库。总之，当你在 TypeScript 中使用 import 和 export 时，相应的编译代码依赖它。

你也可以看到这个问题：

• what is the purpose of these angular2 imports?

Answer 2

• RxJs https://github.com/Reactive-Extensions/RxJS 反应式编程、Observable 和操作符
• Polyfills 抽象出浏览器差异，其中根据执行应用程序的浏览器应用不同的代码
• ZoneJS https://github.com/angular/zone.js 就像 Angular 运行的代码的外壳，其中一些 API（addEventListener、setTimeout()、...）被修补，以便在调用它们时 Angular 得到通知。这是 Angular 运行变更检测的时候。

Answer 3

Rxjs

引入可观察对象。它提供了一个事件流抽象，能够订阅和处理事件。如果一个 observable 发出一个值或对象字面量，你可以这样做：

  {{  data  | async }}

其中数据在组件中定义为：

 data  = Rx.Observable.create(...);

http服务返回一个observable，所以你也可以做类似的事情：

 data = http.get(...);

统称为反应式编程，将焦点转移到范式上——它使用更高级别的事件流抽象以不同的方式思考和编程。而不是思考“我如何发出和订阅事件？”对于任何事件编程模型来说，这都是一个完全有效的问题，你开始问“我想要什么样的事件流？如何组合这些事件流或使用流操作符操作它们以获得我想要的行为？我想要实时流（如实时视频源）还是我想要可播放的流（如预先录制的电影）？

一旦您设置了具有所需行为的事件流（称为 observable），您就可以设置订阅者来处理事件。

为了说明这个概念，它有点像这样（伪代码）：

var stream = new ObservableEventStream('left mouse click')
     .skipFirst(3) // skip the first 3 clicks
     .keepLatest() // only output the latest event
     .combineWith(new ObservableEventStream('right mouse click')) // combine with right clicks
     .throttle(300); // throttle the events so that the speed is 1 event per 300 ms

// now that you have the stream, setup subscribers to handle the event
stream.subscribe(event=> { DoSomethingWithClick(event);  });

这显然是伪代码，但你明白了。实际上，语法是不同的。

如果您了解基本概念，那么真正的事情应该很容易。查看此tutorial 以获取真实示例。

ZoneJS

Angular2 库使用区域来监视浏览器 API 调用和事件处理程序的修补程序，以便 Angular2 知道何时自动触发更改检测。这也是您可以将其他第三方库与 angular2 一起使用并且一切都可以神奇地工作的原因。

要了解猴子如何修补事物，请尝试发送alert(timeout)，您就会明白我的意思了。

在 Angular 1 中，当一些异步事件发生在 Angular 世界之外时，您必须调用 $scope.$apply 手动触发摘要。对于区域，由于猴子补丁，这在 Angular 2 中会自动发生。

垫片和 Polyfills

ES6 为 JavaScript 引入了许多语言特性。今天的浏览器试图与 ES6 兼容，但现实情况是，它们都达不到要求 - 有些比其他浏览器还要多。 Chrome 是最合规的之一，IE 是最差的之一。垫片弥补了这些缺点，因此所有语言功能都可用。换句话说，使用 es6-shim，您可以使用 ES6 功能编写 Angular 应用程序，而不必担心浏览器会崩溃。

polyfill 几乎与 shim 相同，只是它为未来的标准提供支持（还不是标准或处于提案阶段）

Answer 4

Rxjs

RxJS (Reactive Extensions for JavaScript) 是 Observable 的库。 Observable 是一个新添加的内容，类似于您在 Angular 1 中已经知道的 Promises，除了它们可以被多次调用。

基本上 RxJs 是 angular2 中用于请求/响应的库，即在 HTTP 请求时，何时处理 observable 使用.map() and .subscribe() 等 RxJs 运算符来处理 HTTP 请求的响应。

• https://github.com/Reactive-Extensions/RxJS 更多关于 RxJS 的信息

区域 JS

Zones 是从 Dart 中借来的一个想法，Angular 2 使用它来有效地知道何时更新视图。基本上全 angular2的变化检测由ZoneJs完成，即何时更新视图，所做的更改等。

• https://github.com/angular/zone.js有关 ZoneJs 的更多信息

Angular2 Polyfills

我对 polyfills 了解不多，但是 polyfills 用于检查浏览器与代码的兼容性，即检查哪些代码 正在特定浏览器上执行。

angular2的依赖列表见本教程

https://daveceddia.com/angular-2-dependencies-overview/