AngularJS2 是一款开源JavaScript库，由Google掩护，用来帮忙单一页面运用程序运行。
AngularJS2 是 Angular 1.x 的升级版本，性能上得到显著的提高，能很好的支持 Web 开拓组件。
AngularJS2 发布于2016年9月份，它是基于ES6来开拓的。
学习本教程须要的根本知识
学习本教程前，你须要具备基本的前端根本：HTML、CSS、JavaScript。此外你还须要理解 NPM 及 TypeScript。
NPM 利用先容。
TypeScript 入门教程
Angular2.x与Angular1.x 的差异
Angular2.x与Angular1.x 的差异类似 Java 和 JavaScript 或者说是雷锋与雷峰塔的差异，以是在学习Angular2.x时大家须要做好重新学习一门措辞的心里准备。
运行条件!
由于目前各种环境（浏览器或 Node）暂不支持ES6的代码，以是须要一些shim和polyfill（IE须要）让ES6写的代码能够转化为ES5形式并可以正常运行在浏览器中。
从上图可以看出在 Es5 浏览器下须要以下模块加载器：
systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载。
es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块。
traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5代码，systemjs会自动加载 这个模块。
干系参考文档
Angular 官网：https://angular.io/
Angular 官方文档：https://angular.io/docs/ts/latest/quickstart.html
Angular 中文文档：https://angular.cn/docs/ts/latest/quickstart.html
Angular Github:https://github.com/angular/angular
AngularJS2 JavaScript 环境配置本章节我们为大家先容如何配置 AngularJS2 的实行环境。
本章节利用的是 JavaScript 来创建 Angular 的运用，当然你也可以利用 TypeScript 和 Dart 来创建 Angular 运用 。
本章节利用到的文件目录构造如下所示:
创建配置文件
创建目录
$ mkdir angular-quickstart$ cd angular-quickstart
载入须要的库
这里我们推举利用 npm 来作为包的管理工具，如果你还没安装npm或者不理解 npm 可以查看我们的教程：NPM 利用先容。
创建 package.json 文件，代码如下所示：
package.json 文件：
{\"大众name\公众: \公众angular2-quickstart\"大众, \公众version\公众: \"大众1.0.0\公众, \"大众scripts\公众: {\"大众start\"大众: \公众npm run lite\"大众, \"大众lite\"大众: \公众lite-server\"大众}, \"大众license\"大众: \"大众ISC\"大众, \"大众dependencies\"大众: {\"大众@angular/common\"大众: \公众2.0.0\公众, \公众@angular/compiler\"大众: \公众2.0.0\公众, \"大众@angular/core\"大众: \公众2.0.0\"大众, \"大众@angular/forms\"大众: \"大众2.0.0\"大众, \公众@angular/http\公众: \"大众2.0.0\"大众, \公众@angular/platform-browser\公众: \公众2.0.0\"大众, \公众@angular/platform-browser-dynamic\"大众: \"大众2.0.0\公众, \"大众@angular/router\公众: \"大众3.0.0\"大众, \"大众@angular/upgrade\"大众: \公众2.0.0\"大众, \公众core-js\"大众: \公众^2.4.1\"大众, \公众reflect-metadata\公众: \公众^0.1.3\"大众, \"大众rxjs\"大众: \"大众5.0.0-beta.12\"大众, \"大众zone.js\公众: \公众^0.6.23\"大众, \"大众angular2-in-memory-web-api\"大众: \公众0.0.20\"大众, \"大众bootstrap\"大众: \公众^3.3.6\"大众}, \"大众devDependencies\"大众: {\公众concurrently\公众: \公众^2.0.0\"大众, \"大众lite-server\"大众: \"大众^2.2.0\"大众}}
由于 npm 官网镜像海内访问太慢，这里我利用了淘宝的npm镜像，安装方法如下：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
实行后我们就可以利用 cnpm 命令来安装模块：
$ cnpm install
实行成功后，angular-quickstart 目录下就会天生一个 node_modules 目录，这里包含了我们这个实例须要的模块。
创建 Angular 组件
组件（Component）是构成 Angular 运用的根本和核心，一个组件包装了一个特定的功能，并且组件之间协同事情以组装成一个完全的运用程序。
一样平常来说，一个组件便是一个用于掌握视图模板的JavaScript类。
接下来我们在 angular-quickstart 创建一个 app 的目录：
$ mkdir app$ cd app
并添加组件文件 app.component.js ，内如如下：
app.component.js 文件：
(function(app){app.AppComponent = ng.core.Component({selector: 'my-app', template: '<h1>我的第一个 Angular 运用</h1>'}) .Class({constructor: function(){}});})(window.app || (window.app = {}));
接下来我们来剖析下以上代码：
我们通过链式调用全局Angular core命名空间ng.core中的Component和Class方法创建了一个名为AppComponent的可视化组件。
Component方法接管一个包含两个属性的配置工具，Class方法是我们实现组件本身的地方，在Class方法中我们给组件添加属性和方法，它们会绑定到相应的视图和行为。
模块
Angular运用都是模块化的，ES5没有内置的模块化系统，可以利用第三方模块系统，然后我们为运用创建独立的命名空间 app，文件代码可以包裹在 IIFE（立即实行函数表达式）中：
(function(app) {})(window.app || (window.app = {}));
我们将全局app命名空间工具传入IIFE中，如果不存在就用一个空工具初始化它。
大部分运用文件通过在app命名空间上添加东西来输出代码，我们在app.component.js文件中输出了AppComponent。
app.AppComponent =
Class定义工具
本实例中AppComponent类只有一个空的布局函数:
.Class({constructor: function() {}});
当我们要创建一个是有实际意义的运用时，我们可以利用属性和运用逻辑来扩展这个工具。
Component 定义工具
ng.core.Component()见告Angular这个类定义工具是一个Angular组件。通报给ng.core.Component()的配置工具有两个字段：selector和template。
ng.core.Component({selector: 'my-app', template: '<h1>我的第一个 Angular 运用</h1>'})
selector 为一个宿主HTML元素定义了一个大略的CSS选择器my-app。当Angular在宿主HTML中碰着一个my-app元素时它创建并显示一个AppComponent实例。
template 属性容纳着组件的模板。
添加 NgModule
Angular 运用由 Angular 模块组成，该模块包含了 Angular 运用所须要的组件及其他任何东西。
接下来我们创建 app/app.module.js 文件，内容如下：
app.module.js 文件：
(function(app){app.AppModule = ng.core.NgModule({imports: [ng.platformBrowser.BrowserModule], declarations: [app.AppComponent], bootstrap: [app.AppComponent]}) .Class({constructor: function(){}});})(window.app || (window.app = {}));
启动运用
添加 app/main.js 文件：
app/main.js 文件：
(function(app){document.addEventListener('DOMContentLoaded', function(){ng.platformBrowserDynamic .platformBrowserDynamic() .bootstrapModule(app.AppModule); });})(window.app || (window.app = {}));
我们须要两样东西来启动运用：
Angular 的 platformBrowserDynamic().bootstrapModule 函数。
上文中提到的运用根模块 AppModule。
接下来创建 index.html，代码如下所示：
index.html 文件：
<html><head><metacharset=\公众utf-8\"大众><title>Angular 2 实例 - 菜鸟教程(runoob.com)</title><metaname=\"大众viewport\"大众content=\公众width=device-width, initial-scale=1\"大众><linkrel=\"大众stylesheet\"大众href=\"大众styles.css\"大众><!-- 1. 载入库 --><!-- IE 须要 polyfill --><scriptsrc=\"大众node_modules/core-js/client/shim.min.js\"大众></script><scriptsrc=\公众node_modules/zone.js/dist/zone.js\公众></script><scriptsrc=\"大众node_modules/reflect-metadata/Reflect.js\"大众></script><scriptsrc=\"大众node_modules/rxjs/bundles/Rx.js\公众></script><scriptsrc=\"大众node_modules/@angular/core/bundles/core.umd.js\"大众></script><scriptsrc=\"大众node_modules/@angular/common/bundles/common.umd.js\"大众></script><scriptsrc=\公众node_modules/@angular/compiler/bundles/compiler.umd.js\公众></script><scriptsrc=\"大众node_modules/@angular/platform-browser/bundles/platform-browser.umd.js\"大众></script><scriptsrc=\"大众node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js\公众></script><!-- 2. 载入 'modules' --><scriptsrc='app/app.component.js'></script><scriptsrc='app/app.module.js'></script><scriptsrc='app/main.js'></script></head><!-- 3. 显示运用 --><body><my-app>Loading...</my-app></body></html>
index.html 剖析
1、载入我们须要的JavaScript库；
2、载入我们自己的JavaScript文件，把稳顺序；
3、我们在<body>标签中添加<my-app>标签。
实行过程为：当 Angular 在 main.js 中调用 bootstrapModule 函数时，它读取 AppModule 的元数据，在启动组件中找到 AppComponent 并找到 my-app 选择器，定位到一个名字为 my-app 的元素，然后再这个标签之间的载入内容。
添加一些样式
styles.css 文件代码为：
styles.css 文件：
h1{color:#369; font-family:Arial, Helvetica, sans-serif; font-size:250%;}body{margin:2em;}
打开终端，输入以下命令：
$ npm start
访问 http://localhost:3000/，浏览器显示结果为：
这样我们的第一个 Angular2 的运用就算创建完成了，本文所利用的源码可以通过以下办法下载，不包含 node_modules。
AngularJS2 架构Angular 2 运用程序运用紧张由以下 8 个部分组成：
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、做事 (Services)
8、依赖注入 (Dependency Injection)
下图展示了每个部分是如何相互事情的：
图中的模板 (Templates)是由 Angular 扩展的 HTML 语法组成，组件 (Components)类用来管理这些模板，运用逻辑部分通过做事 (Services)来完成，然后在模块中打经办事与组件，末了通过勾引根模块来启动运用。
接下来我们会对以上 8 个部分分开解析：
模块
模块由一块代码组成，可用于实行一个大略的任务。
Angular 运用是由模块化的，它有自己的模块系统：NgModules。
每个 Angular 该当至少要有一个模块(根模块)，一样平常可以命名为：AppModule。
Angular 模块是一个带有 @NgModule 装饰器的类，它吸收一个用来描述模块属性的元数据工具。
几个主要的属性如下：
declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
imports - 本模块组件模板中须要由其它导出类的模块。
providers - 做事的创建者。本模块把它们加入全局的做事表中，让它们在运用中的任何部分都可被访问到。
bootstrap - 运用的主视图，称为根组件，它是所有其它运用视图的宿主。只有根模块须要设置 bootstrap 属性中。
一个最大略的根模块:
app/app.module.ts 文件：
import{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';@NgModule({imports: [BrowserModule], providers: [Logger], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent]})exportclassAppModule{}
接下来我们通过勾引根模块来启动运用，开拓过程常日在 main.ts 文件中来勾引 AppModule ，代码如下：
app/main.ts 文件：
import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{AppModule}from'./app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
组件(Components)
组件是一个模板的掌握类用于处理运用和逻辑页面的视图部分。
组件是构成 Angular 运用的根本和核心，可用于全体运用程序中。
组件知道如何渲染自己及配置依赖注入。
组件通过一些由属性和方法组成的 API 与视图交互。
创建 Angular 组件的方法有三步：
从 @angular/core 中引入 Component 润色器
建立一个普通的类，并用 @Component 润色它
在 @Component 中，设置 selector 自定义标签，以及 template 模板
模板(Templates)
Angular模板的默认措辞便是HTML。
我们可以通过利用模板来定义组件的视图来见告 Angular 如何显示组件。以下是一个大略是实例：
<div>网站地址 : {{site}}</div>
在Angular中，默认利用的是双大括号作为插值语法，大括号中间的值常日是一个组件属性的变量名。
元数据(Metadata)
元数据见告 Angular 如何处理一个类。
考虑以下情形我们有一个组件叫作 Component ，它是一个类，直到我们见告 Angular 这是一个组件为止。
你可以把元数据附加到这个类上来见告 Angular Component 是一个组件。
在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。
实例
@Component({ selector : 'mylist', template : '<h2>菜鸟教程</h2>' directives : [ComponentDetails]})export class ListComponent{...}
@Component 装饰器能接管一个配置工具，并把紧随其后的类标记成了组件类。
Angular 会基于这些信息创建和展示组件及其视图。
@Component 中的配置项解释：
selector - 一个 css 选择器，它见告 Angular 在 父级 HTML 中探求一个 <mylist> 标签，然后创建该组件，并插入此标签中。
templateUrl - 组件 HTML 模板的地址。
directives - 一个数组，包含 此 模板须要依赖的组件或指令。
providers - 一个数组，包含组件所依赖的做事所须要的依赖注入供应者。
数据绑定(Data binding)
数据绑定为运用程序供应了一种大略而同等的方法来显示数据以及数据交互，它是管理运用程序里面数值的一种机制。
通过这种机制，可以从HTML里面取值和赋值，使得数据的读写，数据的持久化操作变得更加大略快捷。
如图所示，数据绑定的语法有四种形式。每种形式都有一个方向——从 DOM 来、到 DOM 去、双向，就像图中的箭头所示意的。
插值 : 在 HTML 标签中显示组件值。
<h3>{{title}}<img src=\公众{{ImageUrl}}\公众></h3>
属性绑定: 把元素的属性设置为组件中属性的值。
<img [src]=\"大众userImageUrl\公众>
事宜绑定: 在组件方法名被点击时触发。
<button (click)=\"大众onSave()\公众>保存</button>
双向绑: 利用Angular里的NgModel指令可以更便捷的进行双向绑定。
<input [value]=\"大众currentUser.firstName\"大众 (input)=\"大众currentUser.firstName=$event.target.value\公众 >
指令（Directives）
Angular模板是动态的 。当 Angular 渲染它们时，它会根据指令对 DOM 进行修正。
指令是一个带有\"大众指令元数据\"大众的类。在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上。
在Angular中包含以下三种类型的指令：
属性指令：以元素的属性形式来利用的指令。
构造指令：用来改变DOM树的构造
组件：作为指令的一个主要子类，组件实质上可以看作是一个带有模板的指令。
<li ngFor=\"大众let site of sites\公众></li><site-detail ngIf=\公众selectedSite\"大众></site-detail>
ngFor 见告 Angular 为 sites 列表中的每个项天生一个 <li> 标签。
ngIf 表示只有在选择的项存在时，才会包含 SiteDetail 组件。
做事(Services)
Angular2中的做事是封装了某一特定功能，并且可以通过注入的办法供他人利用的独立模块。
做事分为很多种，包括：值、函数，以及运用所需的特性。
例如，多个组件中涌现了重复代码时，把重复代码提取到做事中实当代码复用。
以下是几种常见的做事：
日志做事
数据做事
总线
税款打算器
运用程序配置
以下实例是一个日志做事，用于把日志记录到浏览器的掌握台：
export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); }}
依赖注入
掌握反转（Inversion of Control，缩写为IoC），是面向工具编程中的一种设计原则，可以用来减低打算机代码之间的耦合度。个中最常见的办法叫做依赖注入（Dependency Injection，简称DI），还有一种办法叫\公众依赖查找\"大众（Dependency Lookup）。
通过掌握反转，工具在被创建的时候，由一个调控系统内所有工具的外界实体，将其所依赖的工具的引用通报给它。也可以说，依赖被注入到工具中。
在传统的开拓模式中，调用者卖力管理所有工具的依赖，循环依赖一贯是梦魇，而在依赖注入模式中，这个管理权交给了注入器(Injector)，它在软件运行时卖力依赖工具的更换，而不是在编译时。这种掌握反转，运行注入的特点即是依赖注入的精华所在。
Angular 能通过查看布局函数的参数类型，来得知组件须要哪些做事。 例如， SiteListComponent 组件的布局函数须要一个 SiteService:
constructor(private service: HeroService) { }
当 Angular 创建组件时，会首先为组件所需的做事找一个注入器（ Injector ） 。
注入器是一个掩护做事实例的容器，存放着以前创建的实例。
如果容器中还没有所要求的做事实例，注入器就会创建一个做事实例，并且添加到容器中，然后把这个做事返回给 Angular 。
当所有的做事都被解析完并返回时， Angular 会以这些做事为参数去调用组件的布局函数。 这便是依赖注入 。
