使用Angular CLI从蓝本生成代码详解


Posted in Javascript onMarch 24, 2018

第一篇文章是: "使用angular cli生成angular5项目" :https://3water.com/article/136621.htm

这篇文章主要是讲生成 Components, Directive, Service, class, interface, enum等等.

ng generate <蓝本名> 命令.

该命令的格式是 ng generate <蓝本名> <参数>.

也可以使用--dry-run参数来列出要生成的文件, 而不是真的生成.

例如:

ng generate component person, 就会生成一个person.component.ts.

ng generate service sales-data 就会生成一个sales-data.service.ts.

ng generate class user-model 就会生成一个user-model.ts 里面是UserModel类.

Components.

ng generate xxx xxx的命令还是有点长, 这里angular cli内置了命令的别名, 例如:

ng generate component person 这个命令,

里面的generate 可以使用字母 g 代替,

里面的component 可以使用字母 c 代替.

所以这两个命令是相等的:

ng generate component person
ng g c person

可以到这里查看component相关的命令和别名:

https://github.com/angular/angular-cli/wiki/generate-component

可能常用的命令参数有:

  1. --flat  表示是否不需要创建文件夹
  2. --inline-template (-it) 模板是否应该放在ts文件里
  3. --inline-style (-is) 样式是否应该放在ts文件里.
  4. --spec 是否需要创建spec文件(测试文件)
  5. --view-encapsulation (-ve)  View Encapsulation策略 (简单理解为样式文件的作用范围策略).
  6. --change-detection (-cd) 变化检查策略.
  7. --prefix 设定这个component的前缀
  8. --dry-run (-d), 打印出生成的文件列表, 而不直接生成.

看下面两对作用相同的命令, 还是使用别名方便:

ng generate component person
ng generate component person --inline-template --inline-style

ng g c person
ng g c person -it -is

下面来试试这些命令:

建立项目: ng new my-app 等npm install结束后再进行操作.

建立好项目后, 进入该目录, 执行命令:

ng g c person -d

使用Angular CLI从蓝本生成代码详解

该命令将会生成上述4个文件, 并更新app.module.ts.

下面把-d参数去掉, 生成文件:

使用Angular CLI从蓝本生成代码详解

使用Angular CLI从蓝本生成代码详解

可以看到文件生成在项目里了. 并且更新了app.module.ts, 在里面做了component的声明.

再试试生成另外一个component, 使用一些参数 View Encapsulation 和 Change Detection Strategy:

ng g c student -ve Emulated -cd OnPush

使用Angular CLI从蓝本生成代码详解

可以看到参数起作用了.

通过源码管理页, 可以看到这两个命令对app.module进行了哪些更新:

使用Angular CLI从蓝本生成代码详解

分别对生成的两个component进行了声明.

然后我commit一下..

Directive.

ng g d filter-box -d

使用Angular CLI从蓝本生成代码详解

这是文件报告, 下面真正的生成:

ng g d filter-box

通过vscode的源码管理, 可以看到变化:

使用Angular CLI从蓝本生成代码详解

directive生成了两个文件和component一样, 也在app.module进行了声明.

看一下目录结构:

使用Angular CLI从蓝本生成代码详解

生成的directive的结构是没有目录, 也就是flat的.

如果不想生成flat样式的, 想让其拥有自己的文件夹, 那么就是用--flat参数:

ng g d filter-box2 --flat false

使用Angular CLI从蓝本生成代码详解

使用Angular CLI从蓝本生成代码详解

这样就有自己的文件夹了.

commit一下.

Service.

ng g s order-data -d

使用Angular CLI从蓝本生成代码详解

可以看到 这个命令会生成flat结构的service.

然后把-d去掉, 真实生成文件:

ng g s order-data

使用Angular CLI从蓝本生成代码详解

可以从源码管理看到, 只生成了两个文件, 并没有在app.module里面注册:

使用Angular CLI从蓝本生成代码详解

当然可以在这里写代码把刚才生成的service注册进去.

但是正确的做法是使用 -m 参数来指定需要注册的module:

ng g s order-data2 -m app

使用Angular CLI从蓝本生成代码详解

使用Angular CLI从蓝本生成代码详解

这次生成的order-data2 service就会在app.module.ts里面进行注册了.

然后再commit一下.

Model/Interface/Enum/Pipe.

model:

ng g cl models/user

这个命令会创建models文件夹, 然后在里面创建user这个model:

使用Angular CLI从蓝本生成代码详解

使用Angular CLI从蓝本生成代码详解

interface:

ng g i models/animal

enum:

ng g e models/gender

使用Angular CLI从蓝本生成代码详解

commit一下.

Pipe.

ng g p camel-case

使用Angular CLI从蓝本生成代码详解

除了生成两个文件之外, 这个命令默认也会更新app.module.

使用Angular CLI从蓝本生成代码详解

Module.

ng g m login

使用Angular CLI从蓝本生成代码详解

使用Angular CLI从蓝本生成代码详解

可以看到module默认是自带文件夹的.

然后我试试添加一个component, 目的是要在login module进行声明:

使用Angular CLI从蓝本生成代码详解

可以看到我要创建的welcome component默认是在app.module里面进行声明的, 这时候如果想要在login module进行声明, 就要使用 -m 参数:

使用Angular CLI从蓝本生成代码详解

去掉-d执行生成命令后:

使用Angular CLI从蓝本生成代码详解

可以看到welcome component这次实在login module进行的声明.

今天先写到这, 更多的参数还是要查看官方文档:https://github.com/angular/angular-cli

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 #Javascript
在vue中使用jointjs的方法
Mar 24 #Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 #Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
Webpack 之 babel-loader文件预处理器详解
Mar 23 #Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 #Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP错误处理函数
2016/04/03 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
PHP时间类完整代码实例
2021/02/26 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
浅析python继承与多重继承
2018/09/13 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
基于python 取余问题(%)详解
2020/06/03 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
如何使用PHP session
2015/04/21 面试题
党员干部承诺书
2014/03/25 职场文书
党支部换届选举方案
2014/05/08 职场文书
环保建议书300字
2014/05/14 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
生产实习心得体会范文
2016/01/22 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers