CLI 快速起步

使用 CLI 工具快速构建 Angular 应用。

相比手动的做一切事情，好的工具使应用开发更快、更易于维护。

Angular-CLI 是一个命令行工具，使用它可以创建项目、添加文件，并执行各种开发中的任务，例如——测试、打包、部署。

在本节，我们的目标是使用 Angular-CLI 并遵循风格指南的推荐，构建和运行一个超级简单的 Typescript版的 Angular 应用，这将有益于每一个 Angular 项目。

本章结束后，我们会通过CLI对开发过程有一个最基本的理解，并将其作为其它文档范例以及真实应用的基础。

要完成目标，包含下面几个主要的步骤：

1. 配置开发环境
2. 新建项目及应用的骨架
3. 启动应用服务器
4. 编辑应用

第一步：配置开发环境

在你做任何事之前，需要配置我们的开发环境。

安装 Node.js 和 npm（假如你的电脑还没有安装）。

通过在命终端/命令行运行node -v和npm -v确保你运行的版本 node 最低4.x.x，npm 最低3.x.x。旧版本会产生错误，但新版本不会。

全局安装 Angular-CLI：

npm i -g @angular/cli

第二步：新建项目

打开终端窗口。

通过运行下面的命令生成新的项目和应用的骨架：

ng new my-app

请耐心等待。它需要时间来配置新项目，大多数时间用来安装 npm 包。

第三步：启动应用服务器

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

cd my-app
ng serve

ng serve命令启动服务器，并监视文件，当文件发生改变后重新构建应用。

打开浏览器，输入http://localhost:4200/，显示欢迎信息：app works!。

第四步：编辑我们的第一个 Angular 组件

CLI 为我们创建第一个 Angular 组件。这就是命名为app-root的根组件。你可以在./src/app/app.component.ts中找到它。

打开组件文件修改title属性，从app works!改为My First Angular App：

export class AppComponent {
  title = 'My First Angular App';
}

浏览器自动刷新，我们会看到修改后的标题。这很好，但我们可以让它变得更好看一点。

打开src/app/cli-quickstart.component.css，给我们的组件设置些样式。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

接下来做什么？

如你所愿，我们完成了这个“Hello, World”应用。

现在，你可以开始英雄之旅教程，通过构建一个小型应用来学习如何用 Angular 构建各种大型应用了。

或者，你也可以稍等一会儿，学学在这个新项目中的文件都是干什么用的。

项目文件概览

Angular-CLI 项目是快速构建实验和企业解决方案的基础。

我们查看的第一个文件应该是README.md。它有一些如何使用 CLI 命令的基础信息。无论何时你想要知道更多的关于 Angu-CLI 如何工作的信息，一定要访问Angular-CLI仓库和Wiki。

有些生成的文件可能你并不熟悉，接下来我们就讲讲它们。

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

根目录

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

下一步

如果你是Angular新手，我们推荐继续学习路径。

你可以跳过“环境配置”这一章，因为你已经在使用 Angular-CLI 配置好了环境。