发表于： 2017-07-07 23:24:02
1 954
今天完成的事情：
message表单验证：
引用：angular-messages.js
依赖：angular.module('myApp',['ngMessages'])
某个表单输入是否已填写
<input type="text" required />
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：
<input type="text" ng-minlength="5" />
验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：
<input type="text" ng-maxlength="20" />
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
<input type="text" ng-pattern="/[a-zA-Z]/" />
验证输入内容是否是数字，将input的类型设置为number：
<input type="number" name="age" ng-model="user.age" />
验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
<input type="email" name="email" ng-model="user.email" />
验证输入内容是否是URL，将input的类型设置为 url：
<input type="url" name="homepage" ng-model="user.facebook_url" />
为什么需要使用resolve？
当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。
resolve是干嘛用的
resolve属性里的值会在路由成功前被预先设定好，然后注入到控制器中。通俗地将，就是等数据都“就位”后，才进行路由。这样的好处就是页面仅会被渲染一遍。
resolve属性的值（这里是user）注入到控制器的方式有一个非常强大的地方，就是可以运用他来重用控制器，需要做的仅仅只是改变user对象里面的值（tips：如果是嵌套路由的话，不重新设置resolve值则会“继承”父路由的resolve值，如果不是嵌套路由且不重新设置，则不会正确显示）。
双向绑定：
AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
在html中:
<body ng-app="ngApp">
<div ng-controller="ngCtl">
<input type="text" ng-model="myInput" />
</div>
</body>
在js中:
// angular app
var app = angular.module("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
$scope.myInput = "text for input";
}]);
在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.
这样, 就实现了NG的双向数据绑定: 即HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化。
明天计划的事情：
收尾，开始任务8
问题：
暂无
收获：
如上
返回列表
评论