今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

‍‍对登录页的两个input框添加ng-model进行双向绑定

<input type="text" placeholder="请输入账号" name="name" autofocus required ng-model="name" maxlength="16"
          pattern="^\w+$" minlength="5">

  <input type="password" placeholder="请输入密码" name="pwd" required="" ng-model="password" maxlength="20"
          minlength="6">

为整个登录页的form表单添加验证功能

<div class="box">
   <img src="images/user.png" alt="用户名">
   <input type="text" placeholder="请输入账号" name="name" autofocus required ng-model="name" maxlength="16"
          pattern="^\w+$" minlength="5">
</div>
<div class="remind">
   <div ng-messages="loginForm.name.$error" ng-show="loginForm.name.$touched">
       <p ng-message="required">* 账号不能为空</p>
       <p ng-message="minlength">* 账号为5-16位</p>
       <p ng-message="pattern">* 账号为英文或数字</p>
   </div>
</div>
<div class="box">
   <img src="images/password.png" alt="密码">
   <!--对登录页的两个input框添加ng-model进行双向绑定 ， input输入框和 $scope.password 的双向绑定-->
   <input type="password" placeholder="请输入密码" name="pwd" required="" ng-model="password" maxlength="20"
          minlength="6">
</div>
<div class="remind">
   <!--ng-show-->
   <div ng-messages="loginForm.pwd.$error" ng-show="loginForm.pwd.$touched">
       <p ng-message="required">* 密码不能为空</p>
       <p ng-message="minlength">* 密码为6到20位</p>
   </div>
</div>

对登录页的button添加ng-click事件，当点击时，获取双向绑定后的数据，并用$http请求登录接口

<button  ng-click="login()" ng-disabled="loginForm.$invalid">登录</button>

在 form 层面，可以使用 ng-disabled来控制提交按钮的状态，在 form 表单项全部验证通过前不可点击，登录成功后跳转到列表页面

明天计划的事情：（一定要写非常细致的内容） 

‍‍AngularJS的很多知识点还不熟悉,继续在https://www.w3schools.com学习AngularJS

‍‍遇到的问题：（遇到什么困难，怎么解决的） ‍‍

怎么通过点击 文章列表 获取列表页接口数据?

怎么通过ng-repeat等方法将数据渲染到页面上?

‍‍

收获：（通过今天的学习，学到了什么知识）

‍‍input 验证选项

‍‍AngularJS 的 input 标签 自带的验证选项有以下这些。‍‍

<input
        ng-model=""
        [name=""]
        [required=""]
        [ng-required=""]
        [ng-minlength=""]
        [ng-maxlength=""]
        [ng-pattern=""]
        [ng-change=""]>
...
</input>

a. 必填

使用 ng-required 可以根据后面表达式的值设置是否 required 。在不满足 required 时 form.myName.$error 为 {required: true} 。

b. 长度

在不满足 ng-minlength/ng-maxlength 时 form.myName.$error 为 {minlength: true, maxlength: true} 。

直接使用 minlength/maxlength 也有相同效果，而且 maxlength 可以设置最多输入 x 个字符，超过之后无法再输入。

c. 模式匹配

在不满足 ng-pattern 时 form.myName.$error 为 {pattern: true} 。

ng-messages 是 AngularJS 1.3 提供的一个用来增强模版显示的模块，主要用在处理复杂的错误信息。

在以前的版本中，如果想处理错误信息的显示，可能需要定义一堆 code 再结合复杂的 ng-if 语句来实现。而且在输入同时满足多条错误规则的情况下，无法控制错误信息显示的优先级。这些，使用 ng-messages 可以完美解决。