美文网首页
Angulars - Novice

Angulars - Novice

作者: 逝阳晨风 | 来源:发表于2017-11-05 22:50 被阅读0次
    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

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

    相关文章

      网友评论

          本文标题:Angulars - Novice

          本文链接:https://www.haomeiwen.com/subject/bznhmxtx.html