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

第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/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

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

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

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

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

ng g c student -ve Emulated -cd OnPush

可以看到参数起作用了.

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

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

然后我commit一下..

Directive.

ng g d filter-box -d

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

ng g d filter-box

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

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

看一下目录结构:

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

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

ng g d filter-box2 --flat false

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

commit一下.

Service.

ng g s order-data -d

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

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

ng g s order-data

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

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

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

ng g s order-data2 -m app

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

然后再commit一下.

Model/Interface/Enum/Pipe.

model:

ng g cl models/user

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

interface:

ng g i models/animal

enum:

ng g e models/gender

commit一下.

Pipe.

ng g p camel-case

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

Module.

ng g m login

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

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 使用Angular CLI生成 Angular 5项目教程详解
  • 详解Angular-cli生成组件修改css成less或sass的实例
  • 详解angularJS动态生成的页面中ng-click无效解决办法
赞 (0)

相关推荐

  • 使用Angular CLI生成 Angular 5项目教程详解

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网:https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命

  • 详解angularJS动态生成的页面中ng-click无效解决办法

    今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 2.用$compile函数编译一下上边的内容 var $html = $compile(html)($scope); 3.将编译好的内容插入到页面中 $("b

  • 详解Angular-cli生成组件修改css成less或sass的实例

    详解Angular-cli生成组件修改css成less或sass的实例 使用cli命令生成组件: ng generate component 组件名 生成出来的组件文件有:html / ts / css / spec.ts 问题我是一个less重度患者怎么可能再去写css呢. 于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而不是css文件: 修改angular-cli.json文件: apps "styles": [ "styles.less"

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

    第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 这篇文章主要是讲生成 Components, Directive, Service, class, interface, enum等等. ng generate <蓝本名> 命令. 该命令的格式是 ng generate <蓝本名> <参数>. 也可以使用--dry-run参数来列出要生成的文件, 而

  • C#如何通过T4自动生成代码详解

    T4简介 T4(Text Template Transformation Toolkit)在 Visual Studio 中,"T4 文本模板"是由一些文本块和控制逻辑组成的混合模板,它可以生成文本文件. 在 Visual C# 或 Visual Basic 中,控制逻辑编写为程序代码的片段.生成的文件可以是任何类型的文本,例如网页.资源文件或任何语言的程序源代码. T4 文本模板有两种类型: 1.运行时模板 可在应用程序中执行运行时 T4 文本模板("预处理过的"

  • 最新最全PHP生成制作验证码代码详解(推荐)

    最新最全PHP生成制作验证码代码详解(推荐)

    1.0 首先先看代码 <?php header("Content-Type:text/html;Charset=UTF-");// 设置页面的编码风格 header("Content-Type:image/jpeg");// 通知浏览器输出的是jpeg格式的图像 $img = imagecreatetruecolor(,);//创建画布并设置大小 x轴 y轴 $bgcolor = imagecolorallocate($img, mt_rand(,), mt_

  • Mybatis逆向生成使用扩展类的实例代码详解

    1.背景介绍 用的mybatis自动生成的插件,然而每次更改数据库的时候重新生成需要替换原有的mapper.xml文件,都要把之前业务相关的sql重新写一遍,感觉十分麻烦,就想着把自动生成的作为一个基础文件,然后业务相关的写在扩展文件里面,这样更改数据库后只需要把所有基础文件替换掉就可以了 2.代码 2.1 BaseMapper.java 把自动生成的方法都抽到一个base类,然后可以写一些公共的方法 /** * @author 吕梁山 * @date 2019/4/23 */ public i

  • Python生成验证码、计算具体日期是一年中的第几天实例代码详解

    1.约瑟夫环问题 <幸运的基督徒> 有15个基督徒和15个非基督徒在海上遇险,为了能让一部分人活下来不得不将其中15个人扔到海里面去,有个人想了个办法就是大家围成一个圈,由某个人开始从1报数,报到9的人就扔到海里面,他后面的人接着从1开始报数,报到9的人继续扔到海里面,直到扔掉15个人.由于上帝的保佑,15个基督徒都幸免于难,问这些人最开始是怎么站的,哪些位置是基督徒哪些位置是非基督徒. def main(): ''' 先用列表中每个数字代表每个人,然后通过循环替换列表中的数字 用@代表基督徒

  • 使用 Opentype.js 生成字体子集的实例代码详解

    字体子集是将字体文件中部分多余的字符删除,来减小文件大小,从而在 Web 端使用或嵌入到其他应用或系统中,在网上可以找到不少这方面的工具. Opentype.js是一套可以支持浏览器环境和 Node.js 环境的开源 OpenType 字体读写库,利用这个库可以很轻松实现浏览器环境和 Node.js 环境的字体子集功能. 在浏览器环境创建字体子集工具 首先创建一个简单的 HTML界面,包括一个选取字体文件按钮,一个输入框用于输入保留的字符,和一个保存下载按钮. HTML <!DOCTYPE ht

  • SQL 使用 VALUES 生成带数据的临时表实例代码详解

    VALUES 是 INSER 命令的子句. INSERT INOT 表名(列名1,列名2,-) VALUES(值1,值2,-) --语法: --SELECT * FROM ( --VALUES -- (1,2,3,......) -- ,(1,2,3,......) -- ,(1,2,3,......) -- ,(1,2,3,......) -- ,(1,2,3,......) -- ,(1,2,3,......) --) AS t(c1,c2,c3......) SELECT * FROM (

  • Angular.js之作用域scope'@','=','&'实例详解

    什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat

  • 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

    最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下AngularJS的提供的指令,但是没有发现相应的指令.而一个看起来很像的指令就是ng-checked,但是这个指令是用来代替标签里面checked属性的,所以也用不了.因此我就自己动手试着写一个这样的指令,相应的代码如下: <form name="test_form" ng-controller="TestCtrl"> <input type="checkbox&

  • Angular4表单验证代码详解

    Angular4表单验证代码详解

     背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe

随机推荐