发表于: 2017-05-10 23:57:26
0 886
今天完成的事情:
使用AngularJS完成了任务7登录页面的两个input框数据的双向绑定,使用的ng-model指令。
对登录button添加ng-click事件,并在controller中定义login()方法使用$http请求登录接口。
学习了angular表单验证,包括ng-show和ngMessages,并使用ngMessages为form表单添加验证功能,
验证了用户名和密码是否有填写、最大最小长度等。
登录成功后用location.href="url"使页面跳转到列表页。
明天计划的事情:
完成任务7剩余的获取列表页接口数据并用ng-repeat将数据渲染到页面上。
学习ui-router,开始任务8
遇到的问题:
中间学习ngMessages时遇到问题,表单验证提示信息无法正常显示,开始以为是script标签引入的angularjs文件版本不一致,
后来版本统一后问题还在,直到我照着书上的代码敲到var app = angular.module("myApp",["ngMessages"]);时才发现我没有在这里注入ngMessages模块。其他的还有nginx的配置也遇到过问题,比如文件路径中包含“\t”转义字符导致错误等。
收获:
学习了angularjs的数据双向绑定、ng-click事件、$http的用法、表单验证的原理和作用以及用处,主要是提高用户体验,
不用等到数据传输到服务器就能得到验证。今天的小课堂是王相博讲的angularjs的指令。
指令分为内置指令和自定义指令,内置指令有六十多种,像ng-model,ng-app,ng-controller,ng-messages都是内置指令,自定义指令则是用户使用directive()方法在scope中设置的,可以在页面中嵌入别的html页面,这一功能也可以由ng-include代替。
评论