Angular官方文档学习笔记之CLI快速起步

Angular-CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

设置开发环境

node版本4.X.X以上，npm版本3.X.X以上。

全局安装Angular-CLI：

1	npm install -g @angular/cli

创建新项目及应用骨架

运行下面命名生成一个新项目以及应用的骨架代码：

1	ng new my-app

启动开发服务器

进入项目目录，并启动服务器。

1 2	cd my-app ng serve

ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

在浏览器中打开http://localhost:4200/，可以显示应用信息。

项目文件概览

src文件夹

你的应用代码位于src文件夹中。所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。这个文件夹之外的文件都是为构建应用提供支持用的。

src
|--app
|	|-app.component.css
|	|-app.component.html
|	|-app.component.spec.ts
|	|-app.component.ts
|	|-app.module.ts
|--assets
|	|-.gitkeep
|--environments
|	|-environment.prod.ts
|	|-environment.ts
|--favicon.ico
|--index.html
|--main.ts
|--polyfills.ts
|--styles.css
|--test.ts
|--tsconfig.json

assets/*文件夹下放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。

environments/*文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。这些文件会在构建应用时被替换。比如你可能在产品环境中使用不同的API端点地址，或使用不同的统计Token参数。甚至使用一些模拟服务。

index.html大多数情况下你都不用编辑它。在构建应用时，CLI会自动把所有js和css文件添加进去，所以你不必在这里手动添加任何 或 标签。

polyfills.ts能帮我们把不同的浏览器对Web标准的支持程度进行标准化。

根目录

src/文件夹是项目的根文件夹之一。其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。

my-app
|--e2e
|  |-app.e2e-spec.ts
|  |-app.po.ts
|  |-tsconfig.json
|--node_modules/...
|--src/...
|--.editorconfig
|--.gitignore
|--angular-cli.json
|--karma.conf.js
|--package.json
|--protractor.conf.js
|--README.md
|--tslint.json

protractor.conf.js给Protractor使用的端到端测试配置文件，当运行ng e2e的时候会用到它。

tslint.json给TSLint和Codelyzer用的配置信息，当运行ng lint时会用到。 Lint功能可以帮你保持代码风格的统一。

生成组件、指令、管道和服务

ng generate component my-new-component
ng g component my-new-component # 简写

# 组件支持关联路径生成
# 如果在src/app/feature/目录中，可以运行：
ng g component new-cmp
# 在src/app/feature/new-cmp中生成组件
# 但是如果这样运行：
ng g component ../newer-cmp
# 组件将会在src/app/newer-cmp中生成

用下面的命令可以生成各种模板：

模板	用法
Directive	`ng g directive my-directive`
Component	`ng g component my-component`
Pipe	`ng g pipe my-pipe`
Service	`ng g service my-service`
Class	`ng g class my-class`
Interface	`ng g interface my-interface`
Enum	`ng g enum my-enum`
Module	`ng g module my-module`