前年12月，Angular开发团队宣布该框架已达到测试阶段，本指南概述了Angular 2的核心部分，并提供了框架如何运行的深入见解。
快速说明：我将Angular 1.x称为AngularJS。
模块
使用Angular 2.0时，开发人员构建的应用程序包含组件，服务，管道等模块。然而，与AngularJS中的模块不同，Angular 2中使用的模块使用ES6模块格式。
对于那些不熟悉此功能的人，它使用export 和import 语句在整个应用程序中共享代码。这些import语句允许用户访问框架的核心部分以及自定义组件（AngularJS过滤器）。
为了更好地理解它是如何工作的，看一下Angular 2代码。
//app/example/example.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'example-component',
templateUrl: 'app/example.component.html'
})
export class ExampleComponent {
}我们要关注的第一件事是import语句，它允许我们创建自定义组件。
import {Component} from 'angular2/core';仔细观察，我们发现它是从angular2 / core 导入的。这是JavaScript中的解构示例。我们只导入我们需要的库中的部分代码。
除了 angular2 / core 库之外，其他流行的库还有 angular2 / http 和 angular2 / common ，所有这些库都允许用户访问框架的核心功能。
如果我们想在Angular 2中创建一个视图，我们的代码看起来就像下面的部分，我们只导入构建@Component 和@View 所需的代码。
import {Component, View} from 'angular2/core';现在我们已经了解了import 语句，让我们讨论代码底部的export 语句。
export class MyComponent {
}
通过检查我们的代码，我们可以看到Angular 2正在利用export 语句来公开ExampleComponent 。实现此功能后，导出的类将在我们的其他文件中可用，并授予我们使用正确路径导入它们的权限。
组件
组件是Angular应用程序的构建块。它们是AngularJS中的指令; 但是，由于TypeScript，它们的配置更加简单。在Angular 2中，组件的使用消除了对控制器和指令的需求，从而解决了开发人员在AngularJS中遇到的许多问题。
此外，组件是完全封装的，这意味着只要我们正确使用它们，我们就不必担心组件中的代码会干扰页面上的其他组件。
Angular 2.0应用程序通常由顶级组件组成。在此组件内部，我们需要导入我们希望此应用程序使用的任何其他组件。
为了更好地理解这一点，看一下复制顶级组件的另一段代码。
app/main.ts
import {Component} from 'angular2/core';
import { ExampleComponent } from '../example/example'
@Component({
selector: app-component,
styleUrls: ['app/styles.css'],
directives: [ExampleComponent]
template: `
This is the Main Component!!!!
`
})
export class MainComponent {
}作为步骤1和2的结果，我们可以在此MainComponent 模板中使用<example-component> </ example-component> HTML标记，从而共享ExampleComponent中定义的逻辑现在我们对框架有了一些了解，我们可以推断一些关于代码的东西。首先，我们从相对于该文件的路径导入ExampleComponent 。接下来，我们看到ExampleComponent 作为指令包含在此组件的配置中，这是Angular用于嵌套组件的实践。
模板语法和数据绑定绑定
使用Angular 2时，开发人员利用单向数据流在整个应用程序中发送属性。这种情况的例外是Angular 2的ngModel 指令，它可以在必要时通过以下语法提供双向数据绑定：[{ngModel}] 。
通过分析语法，我们看到我们有一个括号和方括号，它们都是Angular 2的新语法的核心，并且表示事件绑定（） 以及属性绑定[] 。
财产绑定 – []
Angular使用[] 将属性绑定到模板。属性绑定通过组件流入模板，并且只能用于设置不同的属性。要在AngularJS中执行此操作，我们依赖于ng-class ，ng-src ，ng-style 等指令。但是，在Angular 2中，我们可以通过使用[] 语法将值绑定到HTML元素来实现此目的。
为了更好地理解这一点，让我们看看下面的一段代码。为了这个例子，我们假设这个模板绑定到一个具有imgSrc 和isShowing 属性的组件。
首先，我们看到Angular使用嵌套属性绑定[class.isShowing] =“isShowing” 。通过检查这个绑定，我们看到它使用点表示法告诉Angular将img-border 类添加到我们的div，并且isShowing 属性为true。
另外，我们可以利用这种语法在元素上设置样式：[style.background] =“’blue’” 。继续，我们看到[src] 用于设置我们的<img> 标签来呈现我们组件内的URL集。
事件绑定 – （）
在AngularJS中工作时，核心概念是双向数据绑定。尽管它有效，但由于不断通过应用程序来回发送数据的副作用，它经常会引起很多问题，从而解释了Angular 2利用单向流的原因。与属性绑定不同，事件从模板流向组件。因此，事件可以与属性绑定相关联，以执行一些非常强大的功能。
在AngularJS中工作时，开发人员使用ng-click ，ng-blur ，ng-submit 等指令来发布事件; 然而，这在Angular2翻天覆地的变化。此外，Angular2提供用户访问所有本地HTML5事件，如点击，了mouseenter ，鼠标离开，变化，模糊，只需在括号包裹事件的名称等， 。
在Angular 2中使用输入时，框架提供$ event 消息，其中包含有关输入值的消息。在该示例中，我们可以看到$ event 在输入标记中起作用以执行双向数据绑定。
我们已经知道我们可以使用 {{ngModel}} 实现这一目标; 但是，此示例可以准确了解数据在整个应用程序中的流动方式。
dfdfdfefe {{name}}因为数据不是通过相同的管道发送的，所以我们需要使用这种语法来实现双向数据绑定（除非我们使用[{ngModel}] 。也就是说，我们模板的{{name}} 值正在接收来自组件，并且只要我们的（输入）事件将数据发送回组件，它就会改变。<！ – 与 – >相同的结果
结论
Angular 2的发布受到全世界开发人员的高度期待，包括我自己。虽然我只花了很少的时间来处理它，但显然我们将继续看到它的使用，不仅在大型Web应用程序中，而且在移动和桌面应用程序开发中。