Angulars常用的主要书写代码的几个地方
component 模块
service 服务
module 路由
以及基础的网页需求html、css
HTML可以算是视图输出,module是调用地址--指向对应的模块,service是方法(可以理解为模型),component是接收值,调用方式,传递值(可以理解为控制,个人是类似于一个中介中转)
具体的直接这边先贴HTML代码吧,因为带了注释
<p>
login works!
</p>
<div>
<!-- #xRef x->代指参数名 Ref->是引用(reference) 这里引用的是input的值,调用的话是xRef.value -->
<h1>最初的</h1>
<input #usernameRef type="text">账号<br>
<input #passwordRef type="password">密码<br>
<button (click)="ding(usernameRef.value,passwordRef.value)">Login</button><br>
<h2>双向绑定</h2>
<!-- 双向绑定,通过用户做出的动作在Model里面进行相应的操作 -->
<!-- 管道的用法 {{usernameRef.errors | json}} |是管道操作符,用于将前面的结果通过管道输出成另一种格式 {{结果 | 格式}}-->
<!-- form表单一定要注册ngForm -->
<form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)" >
<input required name="username" type="text" placeholder="请输入账号" onfocus="this.placeholder=''" onblur="this.placeholder='请输入账号'" [(ngModel)]="username" #usernameRef="ngModel">账号<div *ngIf="usernameRef.errors ?.required">必选项</div><br>
<input required minlength="3" name="password" placeholder="请输入密码" type="password" [(ngModel)]="password" #passwordRef="ngModel">密码
<!-- minlength长度限制 required必选 -->
<div *ngIf="passwordRef.errors?.required">必选项</div><br>
<!-- 解释下上句的意思,如果passwordRef.errors.required为true显示;如果error为空则不执行.required(即只直接判断error不再具体到判断error.required) -->
<div *ngIf="passwordRef.errors?.minlength">长度必须大于3</div><br>
<button (click)="dings()">Login</button>
<button type="submit">Submit</button>
</form>
</div>
这是一个基本的HTML的代码,其中大部分都作了简单的解释
这边要稍微提下的是
很常用的一个angular的指令就是 *ngif
以及稍微简单说下 双向绑定
- *ngif
这是一个判断的指令,在angular里面可以通过_ngif_来进行对一个DOM元素来进行生成和移除(可以想象成隐藏一样的效果,但是不是隐藏!)
因为好像还有一个ngif else的用法,具体还没实用过,所以不拿出来这里说 -
双向绑定
这边就只是做一个简单的解释:[(ngModel)]=''xxxx''表示的component定义了一个变量xxxx,然后HTML里面的xxxx会直接赋值到component定义的同名变量里面.....
个人理解 (可能理解有误系列)
所以传值的一个关系可以表示成html→component
然后还有一个[xxxx],这个传值关系是component→html
后续向......
(初学者- -所以很多都是看教程写的简单例子,然后做了一个自我理解,可能有些地方有误,所以有的就请纠结)
网友评论