angular文档——CLI-快速起步

CLI 快速起步

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

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

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

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

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

要完成目标,包含下面几个主要的步骤:

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

第一步:配置开发环境

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

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

通过在命终端/命令行运行node -vnpm -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
文件 用途
app/app.component.{ts,html,css,spec.ts} 定义了AppComponent相关的HTML模板、css样式和单元测试。随着应用程序的进化,它将成为嵌套组件树的根组件。
app/app.module.ts 定义AppModule,根模块告诉Angular如何配置应用程序。现在它只声明了AppComponent。之后会有更多的组件声明。
assets/* 一个可以存放图片和任何你需要的东西的目录,在构建应用时,它们全部会复制到发布的包中。
environments/* 这个目录包含为每个目标环境准备的配置文件,它们导出了一些应用中要用到的配置变量。 当你构建应用时,文件会被动态的替换。你可能在开发时使用与生产时不同的后端API。或使用不同的统计Token参数。甚至使用一些模拟服务。所有这些,CLI都替你考虑到了。
favicon.ico 每个网站都想在书签栏看起来好看。请把它换成你自己的图标。
index.html 这是别人访问你的网站是看到的主页面的HTML文件。大多数时候你永远也不需要编辑它。当构建应用时,CLI会自动地添加所有的 jscss文件,所以你从来都不需要在这里手动的添加任何的

你可能感兴趣的:(angular文档——CLI-快速起步)