博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular 5.0 学习4:Angular CLI常用指令
阅读量:6211 次
发布时间:2019-06-21

本文共 1548 字,大约阅读时间需要 5 分钟。

1.什么是Angular CLI?

Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程。它帮助你做如下事情:

  1. 创建一个新的 Angular 应用程序
  2. 运行带有 LiveReload 支持的开发服务器,以便在开发过程中预览应用程序
  3. 添加功能到现有的 Angular 应用程序
  4. 运行应用程序的单元测试
  5. 运行应用程序的端到端 (E2E) 测试
  6. 构建应用程序

2.常用指令

ng init :在当前目录创建新的应用程序。

ng new :创建新的目录,然后在新建的目录中运行 ng init 命令。

因此 ng new 与 ng init 的功能是相似的,只是 ng new 会为我们创建新的目录。

ng serve:命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。

使用--open(或-o)参数可以自动打开浏览器并访问:4200/。

ng serve --open

常用于新建的指令

ng generate class my-new-class // 新建 class

ng generate component my-new-component // 新建组件
ng generate directive my-new-directive // 新建指令
ng generate enum my-new-enum // 新建枚举
ng generate module my-new-module // 新建模块
ng generate pipe my-new-pipe // 新建管道
ng generate service my-new-service // 新建服务

可以简写成:

ng g cl my-new-class // 新建 class

ng g c my-new-component // 新建组件
ng g d my-new-directive // 新建指令
ng g e my-new-enum // 新建枚举
ng g m my-new-module // 新建模块
ng g p my-new-pipe // 新建管道
ng g s my-new-service // 新建服务

运行单元测试

ng test

运行 End-to-End 测试

ng e2e

构建应用程序

ng build

可用选项:

--aot: 开启 ahead-of-time 编译

--base-href: string, 设置 index.html 文件中 <base> 元素的链接地址。

--environment: string, 设置所使用的环境,默认为 dev。

--output-path: string, 设置输出的路径。

--target: string, 设置所使用的环境,默认为 development。

--watch: boolean, 默认为 false, 开启 watch 模式,监听文件异动并自动重新构建。

3.怎么使用这些指令?

以新建一个test名称的组件为例:

  • 使用cmd进入相应的目录输入ng g c test命令可使用。

图片描述

  • 在IDE的Terminal面板输入ng g c test命令可使用,我的IDE是WebStorm。
如果想要新建目录demo,再新建test组件,可以执行ng g c demo/test,这样test组件就会出现在demo目录下。

图片描述

4.不想使用这些指令新建怎么操作?

1.点击想要新建组件的目录,比如app目录,然后右键new,选择Angular CLI;

图片描述

2.出现一些新建的选项,点击component;

图片描述

3.输入组件名称test,点击OK即可。

图片描述

转载地址:http://badja.baihongyu.com/

你可能感兴趣的文章
Kotlin 2018 调查:1/4 的 Java 开发者在迁移后表示后悔
查看>>
Python 中包/模块的 `import` 操作
查看>>
NLPIR智能语义挖掘文本大数据深层意义
查看>>
PostgreSQL 快速返回表上某列的唯一值(枚举值) - pg_stats.most_common_vals ...
查看>>
阿里云MVP田亮:让大数据为业务插上翅膀
查看>>
使用DataX进行OTS实例间数据迁移
查看>>
贾跃亭不是老赖?网传贾跃亭已偿还200亿债务,你怎么看? ...
查看>>
如何将本地文件上传至阿里云ECS中
查看>>
Linux性能分析和优化思维导图
查看>>
puppet实战
查看>>
初学者怎样使用Keras进行迁移学习
查看>>
干货满满:Java、前端、PHP等九大系列资料整理,全面总结,推荐收藏 ...
查看>>
python socket传文件
查看>>
“阿里云大数据技术实战训练营”江苏省大学生万人计划学术冬令营活动成功举行...
查看>>
新Kubeflow,新征程 (一):简化部署体验
查看>>
Kubernetes集群高可用的策略和实践
查看>>
Mybatis调用MySQL存储过程
查看>>
CSS(溢出_判断IE版本)
查看>>
阿里面试90%以上会问到的数据结构;HashMap
查看>>
Jdbc模板、事务管理
查看>>