angular-cli 文档

时间:2022-05-20 11:49:42

Angular/angular-cli

原文来自:https://github.com/angular/angular-cli

Angular/angular-cli

原文来自:https://github.com/angular/angular-cli

cli应用于基于ember-cli项目的Angular应用

备注:

如果你正从测试版或rc版本更新,请查看我们的1.0更新指南。

如果你希望合作,请查阅我们的合作事项清单。

在提交新问题之前,请注意查看那些被标注’常见问题清单’的问题,或许你可以找到你想要的问题答案。

前提说明:

cli和生成的项目存在依赖关系,要求node的版本在6.9.0+,npm 3.0+。

目录:

#安装

#用法

#生成一个新项目

#生成控制器、指令、管道和服务

#更新angular-cli

#基于angular-cli的开发说明

#文档

#证书

安装:

在你安装之前:请阅读前提说明

npm install -g @angular/cli

用法:

ng help

通过开发服务器生成一个angular项目

ng new PROJECT-NAME

cd PROJECT-NAME

ng serve

打开本地地址http://localhost:4200/。当你修改任意资源文件时,页面将自动重载。

你也可以通过开发服务器运行以下的命令行进行自己配置http host以及端口号:

ng serve —host 0.0.0.0 —port 4201

生成控制器、指令、管道和服务

你可以使用命令行 ng generate(或简写:ng g),生成angular的控制器

Ng generate component my-new-component

Ng g component my-new-component  # 简写

# 控制器支持用相对路径生成

# 如果在src/app/feature,可以运行以下命令行生成

Ng g component new-cmp

# 你所要生成的控制器将出现在目录 src/app/feature/new-cmp 下

# 但是如果你运行以下命令行

ng g component  ../newer-cmp

# 你的控制器将会生成在上级目录,即:src/app/newer-cmp

# 如果你的当前目录是 src/app 你可以运行:

ng g component feature/new-cmp

# 控制器将会生成在 src/app/feature/new-cmp 路径下

你可以在以下的表格中找到所有可能需要的ng命令

Scaffold

Usage

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

Guard

ng g guard my-new-guard

Interface

ng g interface my-new-interface

Enum

ng g enum my-new-enum

Module

ng g module my-module

Angular-cli会在app.module.ts中给控制器、指令及管道自动添加引用,如果你需要给另外的自定义模块添加引用,按照以下步骤:

1、ng g module new-module

2、call ng g component new-module/new-component

上面的命令将会根据你新创建的模块增加新的控制器、指令或者管道。

更新angular—cli

如果你正在使用angular-cli 1.0.0-beta.28 或者更低版本,你需要先卸载angular-cli安装包

npm uninstall -g angular-cli

npm uninstall —save-dev angular-cli

为了更新angular cli到新版本,你必须更新全局的安装包和你项目本地的安装包

全局安装包:

npm uninstall -g @angular/cli

npm cache clean

# 如果npm版本高于version5,需要使用’npm cache verify’ 来避免报错(或者避免使用 —-force)

npm install -g @angular/cli@latest

本地项目安装包:

rm -rf node_modules dist # 在window的命令控制符中使用 rmdir /S/Q node_modules dist,在Windows PowerShell中使用rm -f -fo node_modules,dist

npm install —-save-dev @angular/cli@latest

npm install

如果你正从beta或者RC版本更新到1.0,请查阅我们的1.0更新指南文档。

在github的版本标签上,你会发现更多关于版本间改变的详细内容。

关于在Angular Cli上进行开发的一些规范

1、使用master分支

git clone https://github.com/angular/angular-cli.git

cd angular-cli

npm link

npm link 命令的作用和npm install -g是一样的,只是link不会从repo下载安装包,仅将克隆的angular-cli/ 文件目录变成全局的安装包。此外,这个目录的仓库会生成几个安装包,我们会使用特别的逻辑将所有的安装包添加到开发设置上。

任何在angular-cli目录文件上的改动都会立即影响到全局的@angular/cli安装包,你可以快速检测到你在cli项目上的任何改动。

现在可以通过以下命令行使用@angular/cli:

ng new foo

cd foo

npm link @angular/cli

ng serve

npm link @angular/cli将全局的@angular/cli包链到本地作用域。

也可以直接用 ng new foo —link-cli 自动级联到@angular/cli包。

可阅读官方的npm-link文档和npm-link cheatsheet获取更多信息。

想运行测试套件,可以使用node的tests/run_e2e.js命令。

接收一个文件名才能运行该命令(如:node tests/run_e2e.js tests/e2e/tests/build/dev-build.ts)

作为测试程序的部分,所有的的包都要构建和链接。在测试完成后,需要重新运行npm link来重新链接开发环境的AAngular CLI。