使用 angular-cli 安装 Angular

此示例是 Angular 的快速设置以及如何生成快速示例项目。

先决条件：

• Node.js 6.9.0 或更高版本 。
• npm v3 或更高或纱线 。
• 输入 v1 或更高版本。

打开终端并逐个运行命令：

npm install -g typings 或 yarn global add typings

npm install -g @angular/cli 或 yarn global add @angular/cli

第一个命令全局安装 typings 库 （并将 typings 可执行文件添加到 PATH）。第二个在全局安装 @ angular / cli ，将可执行文件 ng 添加到 PATH。

设置新项目

使用终端导航到要设置新项目的文件夹。

运行命令：

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

就是这样，你现在有了一个用 Angular 制作的简单示例项目。你现在可以导航到终端中显示的链接，并查看它正在运行的内容。

添加到现有项目

导航到当前项目的根目录。

运行命令：

ng init

这将为你的项目添加必要的 Scaffolding。这些文件将在当前目录中创建，因此请务必在空目录中运行。

在本地运行项目

为了在应用程序在浏览器中运行时查看应用程序并与之交互，你必须启动一个托管项目文件的本地开发服务器。

ng serve

如果服务器成功启动，它应显示服务器正在运行的地址。通常是这样的：

http://localhost:4200

开箱即用的本地开发服务器与热模块重新加载相连，因此对 html，typescript 或 css 的任何更改都将触发浏览器自动重新加载（但如果需要可以禁用）。

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

ng generate <scaffold-type> <name>（或简称 ng g <scaffold-type> <name>）命令允许你自动生成 Angular 组件：

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false

有几种可能类型的支架 angular-cli 可以产生：

你也可以用第一个字母替换类型名称。例如：

ng g m my-new-module 生成一个新模块或 ng g c my-new-component 来创建一个组件。

建筑/绑定

当你完成 Angular Web 应用程序的构建并且希望将其安装在 Apache Tomcat 等 Web 服务器上时，你需要做的就是运行 build 命令，无论是否设置了生产标志。生产将减少代码并优化生产设置。

ng build

要么

ng build --prod

然后在项目根目录中查找包含构建的/dist 文件夹。

如果你想要更小的生产包的好处，你还可以使用 Ahead-of-Time 模板编译，从最终构建中删除模板编译器：

ng build --prod --aot

单元测试

Angular 提供内置单元测试，angular-cli 创建的每个项目都会生成一个可以花费的基本单元测试。单元测试使用 jasmine 编写，并通过 Karma 执行。要开始测试，请执行以下命令：

ng test

此命令将执行项目中的所有测试，并在每次源文件更改时重新执行它们，无论是测试还是来自应用程序的代码。

有关更多信息，请访问： angular-cli github 页面