使用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 动态添加表格行
Jun 22 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
图书管理程序(三)
2006/10/09 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
javascript cookies操作集合
2010/04/12 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
python实现百度关键词排名查询
2014/03/30 Python
Python-基础-入门 简介
2014/08/09 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
精彩的英文自荐信
2014/01/30 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Go语言入门exec的基本使用
2022/05/20 Golang
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android