Angular2新手向

Angular 2 新手指南

Angular 2 的正式版刚发布没多久，自己也只用过ng1，但是由于很多大佬投奔Typescript而Angular 2又是用的TS，在学TS就顺带学ng 2了。

本文主要就参考官方教程。

因为是新手向所以应该把初始化配置也讲讲……

Init - 初始化

首先就要保证自己装好了NodeJS和npm。
然后建立一个项目文件夹～叫啥都行，看自己喜欢。

一个基础的Angular 2 项目文件夹中包含以下几个配置文件：

• package.json 定义了项目中npm包依赖
• tsconfig.json 定义了Typescript 编译器如何通过项目文件生成Javascript
• typings.json 提供额外的第三方TS库的定义文件
• systemjs.config.js 提供给模块加载器关于哪里寻找应用模块的信息，并且注册所有必要的包依赖。

然后我们来创建他们。

官网上是让我们手动抄下来……

我这里偷懒换个方法：

1. npm init 乱写即可
2. 然后先搞定package.json

npm install @angular/common @angular/complier @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/upgrade --save  
npm install angular-in-memory-web-api bootstrap core-js rxjs reflect-metadata systemjs zone.js   --save
npm install concurrently lite-server typescript typings --save-dev

angular2这个库居然还是beta……

这里来科普一下各个库……
@angular开头的就是各个angular组件。npm里由angular上传。
至于看起来正统的angular（即angular 1）和angular 2由npm上的angularcore上传，然而现在居然还只是beta版……
angular-in-memory-web-api是帮助你在ng2里虚拟api，无需写api后台，方便测试。参考
bootstrap就不用说了大家都知道，很出名。
core-js就是对ES5、ES6、Promises等特性的适配
rxjs直接看这个介绍吧。
如果看不懂，那我这里还有个简介：静态网页已经成为历史，如今的网页设计趋势三预测客户想法并提供更好的互动功能，例如自动填写表单、搜索Wikipedia等，而Rxjs可以很方便地为鼠标和键盘事件提供响应。
= =
reflect-metadata Typescript带的修饰元数据用，元数据反射。
systemjs可不是调用系统用的……简单来说就是一个通用的动态的模块加载器。
zone.js 是angular团队参照Nodejs的Domain，Dart的Zone，为angular2开发的核心组件。详细介绍

concurrently是用来同时跑多个命令的，就像 npm run watch-js & npm run watch-less 但是能做到更好。
lite-server 如你所见就是一个开发用的小server
typescript 就不用介绍了吧……
typings Typescript的定义管理器。Typings是个管理与安装TS（类）定义的简单方法。它使用typings.json决定Typings Registry，GitHub，NPM，Bower，HTTP，以及本地文件。包可以使用类型定义从各种源与不同版本，知道对用户来说他们之间并不会冲突。

差不多介绍完了我们继续步骤……

3. 然后typings.json ./node_modules/typings/dist/bin.js init
./node_modules/typings/dist/bin.js install dt~core-js dt~jasmine dt~node --save --global

4. 然后tsconfig.json ./node_modules/typescript/bin/tsc --init

5. systemjs.config.js我还真不知道怎么简化……