Rxjs

Question

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

RxJs
Angular2 Polyfills
ZoneJS

你能用简单的话来解释我们每个人应该负责什么，为什么我们需要这些？

由于

Answer 1

Rxjs提供了反应式编程概念的实现。 Angular2基于它，用于组件中的自定义事件（扩展EventEmitter的{{1}}类）及其HTTP支持（Subject，get等方法... ）。
Angular2的post文件包含ZoneJS和Reflect-metadata。 ZoneJS是一个触发Angular2变化检测的工具（有关详细信息，请参阅此问题：What is the Angular2 equivalent to an AngularJS $watch?）。 Reflect-metadata是在类上设置元数据。 Angular2装饰器使用它来根据参数定义元数据。例如，组件的配置（选择器，模板......）。
您还可以使用polyfills完成API的部分支持（例如ES6）。
另一个重要的工具是SystemJS，它是管理模块的库。简而言之，当您在TypeScript中使用导入和导出时，相应的编译代码依赖于它。

你也可以看到这个问题：

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运行的代码的shell，其中一些API（addEventListener，setTimeout()，...）被修补，以便Angular在被调用时得到通知。这是Angular运行其变化检测的时候。

Answer 3

Rxjs

RxJS（JavaScript的Reactive Extensions）是Observable的库。 Observable是一个新增加的，类似于你从Angular 1中已经知道的Promises，除了它们可以被多次调用。

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

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

Zone JS

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

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

Angular2 Polyfills

我对polyfills知之甚少，但是使用polyfills来检查浏览器与代码的兼容性，即检查哪些代码正在特定浏览器上执行。

另请参阅本教程，了解angular2的依赖关系列表

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

Answer 4

Rxjs

介绍可观察者。它提供了一个事件流抽象，具有订阅和处理事件的能力。如果一个observable发出一个值或对象文字，你可以这样做：

  {{  data  | async }}

在组件中将数据定义为：

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

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

 data = http.get(...);

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

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

为了说明这个概念，它的类似（伪代码）：

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)，你会明白我的意思。

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

垫片和Polyfills

ES6为JavaScript引入了许多语言功能。今天的浏览器试图符合ES6标准，但实际情况是，它们都不尽如人意 - 比其他浏览器更多。 Chrome是最兼容的，IE是最差的之一。垫片弥补了这些缺点，因此可以使用所有语言功能。换句话说，使用es6-shim，您可以使用ES6功能编写角度应用程序，而不必担心浏览器会崩溃。

polyfill几乎与垫片相同，只是它为未来的标准提供支持（尚未成为标准或提案阶段）

Angular2依赖项的说明

4 个答案:

Rxjs

Zone JS

Angular2 Polyfills

Rxjs

ZoneJS

垫片和Polyfills