使用 angular-cli 安装 angular2
此示例是 Angular 2 的快速设置以及如何生成快速示例项目。
先决条件:
- Node.js v4 或更高版本。
- npm v3 或更高或纱线 。
打开终端并逐个运行命令:
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 页面