发表于: 2017-04-14 01:22:23
1 1081
今天完成的事情:任务7登陆验证,数据双向绑定并用$http请求登录接口成功。
明天计划的事情:学习ng-repat,将数据渲染到页面上,任务8知识储备。
遇到的问题:
1.控制器的概念,理解不是很清楚,登录按钮参考师兄的代码添加了一个控制器,并且设置了两个对象:'$scope', '$state',分别绑定了输入框内容和登录按钮,设置了ng-click事件,但是整个原理理解还不是很清楚
2.使用AngularJS发起$http.post请求,
$http({
url: "/jns/a/login",
method: "post",
data: $.param({"mobile": $scope.mobile, "pwd": $scope.pwd}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function (response) {
response.message === "success"?location.href = "home.html#/admin": $scope.msg = response.message
})
.error(function () {
alert("跨域未配置,无法连接服务器")
})
}
});
{'Content-Type': 'application/x-www-form-urlencoded'}
这里的application/x-www-form-urlencoded:是一种编码格式,窗体数据被编码为名称/值对,是标准的编码格式。当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url后面,用?分割,加载这个新的url。 当action为post时候,浏览器把form数据封装到http body中,然后发送到server。
相应的angularjs 和 jquery js最大的区别在哪儿那,angularjs是你事先在心中构建好真个页面,然后用变量或者占位符来表示数据,数据来了,直接填充就可以了;而jquery则是动态的修改dom元素,如添加修改dom标签等。设计思想不一样。
收获:
1.懒加载引入,即Angular中可以通过$compile来实现指令之间的相互依赖,对此的处理是配置指令名和指令模块的依赖,当用到某个指令的时候,先去加载其模块,非全局样式和js文件都用此方法引入。
2.angularjs'表单验证,通过引入ngMessages模块使用。几个注意事项:
1.确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=”novalidate”
2.form中不能有action属性。提交交由ng-submit处理
3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用
ng默认提供了验证,包括验证是否输入文字,输入位数,也可用正则表达式判断输入格式。
最后可以用ng-message来输出验证信息:
<p ng-message="required">用户名必填</p>
可以直接判断条件输出信息。
评论