使用 angular-cli 安装 angular2

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

先决条件:

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

npm install -g @angular/cli

要么

yarn global add @angular/cli

取决于你选择的包管理器。

上一个命令全局安装 @angular / cli ,将可执行文件 ng 添加到 PATH。

设置新项目

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

运行命令:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

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

添加到现有项目

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

运行命令:

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

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

Scaffolding 类型 用法
module ng g module my-new-module
component ng g component my-new-component
directive ng g directive my-new-directive
pipe ng g pipe my-new-pipe
service ng g service my-new-service
class ng g class my-new-class
interface ng g interface my-new-interface
enum ng g enum my-new-enum

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

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

建筑/绑定

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

ng build

要么

ng build --prod

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

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

ng build --prod --aot

单元测试

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

ng test

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

有关更多信息,请访问: angular-cli github 页面