Angulars - Novice

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
以及稍微简单说下 双向绑定

1. *ngif
   这是一个判断的指令，在angular里面可以通过_ngif_来进行对一个DOM元素来进行生成和移除(可以想象成隐藏一样的效果，但是不是隐藏！)
   因为好像还有一个ngif else的用法，具体还没实用过，所以不拿出来这里说
2. 双向绑定
   这边就只是做一个简单的解释:[(ngModel)]=''xxxx''表示的component定义了一个变量xxxx,然后HTML里面的xxxx会直接赋值到component定义的同名变量里面.....
   个人理解 (可能理解有误系列)
   所以传值的一个关系可以表示成html→component
   然后还有一个[xxxx]，这个传值关系是component→html

后续向......
(初学者- -所以很多都是看教程写的简单例子，然后做了一个自我理解，可能有些地方有误，所以有的就请纠结)