首页 > 代码库 > Angular权威指南学习笔记
Angular权威指南学习笔记
第一章． 初识Angular——Angular是MVW的Js框架。
第二章． 数据绑定——ViewModel中不仅可以含有变量，还可以还有事件。可以通过事件来控制变量的值改变。视图绑定着VM中的变量和事件。
第三章． 模块——可以使用angular.module()来声明模块。
如angular.module(‘myApp’,[])相当于Setter；angular.module(‘myApp’)相当于Getter。
第四章． 作用域——作用：监听变化，通知变化，隔离数据，提供环境。
$scope的生命周期：
- 创建：当创建控制器和指令时。通过$inject创建新的作用域。并在新建控制器和指令运行时传进去。
- 链接：把作用域添加到自己的视图上，并创建事件，以便检测作用域变量的变化。
- 更新：每个子作用域会进行脏值检测。当检测到变化时，会回调指定的函数。
- 销毁：不使用的时间，销毁。
第五章． 控制器——是可以嵌套的，所以作用域包含作用域。demohttp://jsbin.com/URuyoG/1/edit
第六章． 表达式——手动和自动解析。自动通过$digest.如{{}}。手动可以在控制器中控制,让表达式不按套路出牌。
$parse用来访问作用域的数据和函数。
第七章． 过滤器——内置自带过滤器，自定义过滤器，表单验证。
-
-
- 内置过滤器的两种使用方法{{name|uppercase}}和$filter(‘lowercase’)(“ACb”)
- 时间过滤器 {{ time | date:‘y-MM-dd HH:mm:ss‘ }}2014-09-29 17:04:05
- filter 后面可以跟字符串，对象，函数
-
{{ [‘Ari‘,‘Lerner‘,‘Likes‘,‘To‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }} <!-- ["Lerner","Likes","Eat"] -->{{ [{‘name‘: ‘Ari‘,‘City‘: ‘San Francisco‘,‘favorite food‘: ‘Pizza‘},{‘name‘: ‘Nate‘,‘City‘: ‘San Francisco‘,‘favorite food‘: ‘indian food‘}] | filter:{‘favorite food‘: ‘Pizza‘} }}<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->4.通过过滤器对象转成json
var person={};
person.age=12;
person.name="hehe";
var p=$filter(‘json‘)(person);
5.limitTo截取字符串，正从头开始负从尾开始。
6.number 保留n位小数
7.orderBy 下面的例子不仅给出了如何按对象的字段排序还给出了如何使用两个参数的过滤器。
{{ [{‘name‘: ‘Ari‘,‘status‘: ‘awake‘},{‘name‘: ‘Q‘,‘status‘: ‘sleeping‘},{‘name‘: ‘Nate‘,‘status‘: ‘awake‘}] | orderBy:‘name‘:true }}<!--[{"name":"Q","status":"sleeping"},{"name":"Nate","status":"awake"},{"name":"Ari","status":"awake"}]-->
8. uppercase lowercase
自定义过滤器：
下面是自定义函数angular.module(‘myApp‘, []).filter(‘capitalize‘, function(){ return function(input){ if (input) { return input[0].toUpperCase() + input.slice(1); } };}).controller(‘MyController‘,function(){});引用方式{{ ‘ginger loves dog treats‘ | lowercase | capitalize }}
7.2表单
可以验证的Input选项：required, ng-minlength, ng-pattern, name="email",type="number",自定义.
表单中控制变量formName.inputFieldName.propertyy.
1. 未修改：formName.inputFieldName.$pristine
2. 修改过：formName.inputFieldName.$dirty
3. 合法表单：formName.inputFieldName.$valid
4. 不合法表单：formName.inputFieldName.$invalid
5. 错误：formName.inputfieldName.$error
以上对应的css类
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
$parsers通常配合指令来用。当ngModelController中的$setViewValue()方法时。会逐个调用$parser.
demo：
angular.module(‘myApp‘)
.directive(‘oneToTen‘, function() {
return {
require: ‘?ngModel‘,
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(
function(viewValue) {
var i = parseInt(viewValue);
if (i >= 0 && i < 10) {
ngModel.$setValidity(‘oneToTen‘, true);
return viewValue;
} else {
ngModel.$setValidity(‘oneToTen‘, false);
return undefined;
}
$formatters
当绑定的ngModel值发生了变化，并经过$parsers数组中解析器的处理后，这个值会被传递给$formatters流水线
Demo
angular.module(‘myApp‘)
.directive(‘oneToTen‘, function() {
return {
require: ‘?ngModel‘,
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$formatters.unshift(function(v) {
return $filter(‘number‘)(v);
});
}
};
});
7.3下面是关于表单验证的常见例子：
1.异步验证
app.directive(‘ensureUnique‘, function ($http) { return { require: ‘ngModel‘, link: function (scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function (n) { if (!n) return; $http({ method: ‘POST‘, url: ‘/api/check/‘ + attrs.ensureUnique, data: { field: attrs.ensureUnique, value: scope.ngModel } }).success(function (data) { c.$setValidity(‘unique‘, data.isUnique); }).error(function (data) { c.$setValidity(‘unique‘, false); }); }); } };});
<button type="submit"ng-disabled="signup_form.$invalid"class="button radius">Submit</button>
在失焦后显示验证信息
app.directive(‘ngFocus‘, [function () { var FOCUS_CLASS = "ng-focused"; return { restrict: ‘A‘, require: ‘ngModel‘, link: function (scope, element, attrs, ctrl) { ctrl.$focused = false; element.bind(‘focus‘, function (evt) { element.addClass(FOCUS_CLASS); scope.$apply(function () { ctrl.$focused = true; }); }).bind(‘blur‘, function (evt) { element.removeClass(FOCUS_CLASS); scope.$apply(function () { ctrl.$focused = false; }); }); } };}]);
如果使用1.3可以使用ngMessage.
第八章、指令
指令通过关键字directive来定义。
Angular权威指南学习笔记