使用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 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
微信小程序入门教程
Nov 18 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
原生js实现日历效果
Mar 02 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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
php微信开发之自定义菜单实现
2016/11/18 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python循环监控远程端口的方法
2015/03/14 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
外包公司软件测试工程师
2014/11/01 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
销售部主管岗位职责
2013/12/18 职场文书
中学生评语大全
2014/04/18 职场文书
销售个人求职信范文
2014/04/28 职场文书
婚前协议书范本两则
2014/10/16 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
运动会宣传稿50字
2015/07/23 职场文书
800字作文之大雪
2019/12/04 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python