Angular2入门体验
好的工具往往使得开发应用更快更简单，而不是任何模块都手动开发。angualr cli就是一个支持 创建工程，添加文件，对各种任务如测试、打包、部署等迭代。
本文的目的就是基于TypeScript开发构建一个angualr应用，使用angualr cli可以选择工程的风格。
在本章的 末尾，你可以理解CLI的开发以及开发完整应用的样例。
也可以通过这个链接直接下载源码。
第一步，配置环境变量
在开始开发前，需要安装nodejs。
点击这个网址,Nodejs安装文件下载
在命令行中，执行：
sudo npm install -g @angular/cli
注意执行命令的权限，否则会提示无法写入文件异常。
第二步，创建新工程
打开命令行，创建一个新的工程框架：
ng new my-app
创建工程需要花点时间，稍等一会就行了。
第三步，启动应用
在项目目录，执行命令：
cd my-app
ng serve --open
ng serve会启动服务器，监控文件，当修改的时候重启应用。
使用--open 选项会自动开启浏览器并访问http://localhost:4200
可以看到下面的信息：
第四步，编辑angular组件
cli创建了angualr组件，应用组件被命名为app=root,可以在./src/app/app,component.ts中看到。打开文件，修改：
src/app/app.component.ts
export class AppComponent {
title = 'My First Angular App!';
}
浏览器会自动加载重新显示标题。看起来还不错，不过可以在优化一下。
打开src/app/app.component.css设置样式
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
看起来就不错了。
项目文件
首先可以关注下readme.md，它里面包含了cli的基本操作。
更多信息可以参考：
src目录
应用所有的内容都在src目录中，包括组件、模板、样式、图片或者任何app需要的东西。在src之外的内容都被认为是支持app构建的资源。
src
.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules
│ ├──...
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ ├── assets
│ ├── environments
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
app目录
| file | 作用 |
|---|---|
| app/app.component. | 通过html模板定义app，是应用基础组件 |
| app/app.module.ts | 描述如何定义应用 |
| assets/* | 用来放置图片和部署应用时需要的资源 |
| environments/* | 配置信息 |
| favicon.ico | 网站图标 |
| index.html | 主要的html文件，一般时候不需要修改。CLI会自动添加js和css资源 |
| main.ts | 应用的主要入口，基于JIT编译应用，并在浏览器中运行。 |
| polyfills.ts | 浏览器支持标准相关 |
| styles.css | 样式文件 |
| test.ts | 单元测试 |
| tsconfig.{app | spec}.json |
root目录
src目录下包含了工程内部的内容，其他的文件则帮助测试、支持、文档、发布应用。
| file | 作用 |
|---|---|
| e2e | 里面包含了点对点的测试文件 |
| node_modules | 依赖的资源，基于package.json管理 |
| .angular-cli.json | cli的配置文件 |
| .editorconfig | 编辑器配置 |
| .gitignore | git忽略的文件 |
| karma.conf.js | karma test 单元测试 |
| package.json | npm管理的第三方组件 |
| protractor.conf.js | Protractor测试配置文件 |
| readme.md | 工程基本的信息 |
| tsconfig.json | TypeScript编译配置 |
| tslint.json | TSLint配置 |
