Angular command line interface,Angular脚手架。一般来说,脚手架是帮你减少「为减少重复性工作而做的重复性工作」的工具。
这些工具能够帮助你更好的去完成前端代码构建。传统中我们写前端代码并不需要所谓的脚手架,一个html加上css和js,你所需要的工具一个编辑器就够了。但是随着web2.0的发展,页面越来越丰富,尤其是一些大型的、页面数据交互比较复杂的网站,为了优化前端工作,诞生了很多工具。比如让你写css更方便的less,比如当下流行的用将html模板直接用ts(或js)来写的Angular,以及实现js模块化以及前端代码打包的工具webpack。
依赖环境
Node6.9及以上版本,NPM3及以上版本
安装
|
|
使用
|
|
构建并启动一个Angular项目
|
|
在浏览器中打开 http://localhost:4200/。当在开发中有任何源码文件修改时,网页将会自动刷新,非常方便开发。
也可以通过以下命令配置默认的http host和端口
|
|
构建组件、指令、管道、服务
你可以使用 ng generate(ng g)命令来构建Angular组件(Components):
|
|
组件生成支持相对路径。默认生成的组件位于 src/app/目录下
|
|
命令行输出如下,内容不做解释了:
使用相对路径,例如用户管理模块通常有登录、注册、忘记密码等,因此需要构建三个组件
|
|
输出如下:
|
|
这样通过cli,我们很快就可以搭建我们的app,并且它自动将组件添加至ng的模块,也就是 identical src/app/app.module.ts
下面的表格列出了所有的命令,用于都支持相对路径
支架 | 用法 | 说明 |
---|---|---|
Component | ng g component my-component | 新建一个组件 |
Directive | ng g directive my-directive | 新建一个指令 |
Pipe | ng g pipe my-pipe | 新建一个管道 |
Service | ng g service my-service | 新建一个服务 |
Class | ng g class my-class | 新建一个类 |
Guard | ng g guard my-guard | |
Interface | ng g interface my-interface | 新建一个接口 |
Enum | ng g enum my-enum | 新建一个枚举 |
Module | ng g module my-module | 新建一个模块(ng中的模块) |
angular-cli会自动将组件、指令、管道的引用添加至 app.module.ts。如果你需要在另一个自定义模块中引用他们,按下面的步骤操作:
|
|
发布ng项目
|
|
为了方便输入,可以在package.json中编写脚本,可以配置一些参数,方便项目的调试以及发布:
|
|
这样就可以运行npm命令进行启动调试以及发布了:
|
|
更新angular/cli
需要说明的是,更新angular cli至最新版本,需要同时升级全局包和项目本地包。
angular/cli有时会出现无法解释的bug,通常是版本的问题,需要升级到最新的版本,主要有两种方式:
手动更新
12345678910## 全局包:npm uninstall -g @angular/clinpm cache cleannpm install -g @angular/cli@latest## 项目本地包rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShellnpm install --save-dev @angular/cli@latestnpm install使用npm-check更新
使用npm-check可以管理所有npm包是否进行版本更新,通过交互式选取,很容易实现npm包的版本升级管理。首先全局安装npm-check