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用来访问作用域的数据和函数。

第七章．过滤器——内置自带过滤器，自定义过滤器，表单验证。

1. 1. 内置过滤器的两种使用方法{{name|uppercase}}和$filter(‘lowercase’)(“ACb”)
  2. 时间过滤器 {{ time | date:'y-MM-dd HH:mm:ss' }}2014-09-29 17:04:05
  3. 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.

第八章、指令

1.指令通过关键字directive来定义。参数1.名字，参数2函数（返回值是个对象）。

2.向指令传递数据，创建隔离作用域指令对象有个Scope变量。

第九章、内置指令

1.使用ng-include时AngularJS会自动创建一个子作用域

2.ng-switch when on配合使用。

<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>

3.ng-class动态设置元素类。

第十章、指令的详解

10.1.定义：名字和函数（返回值为对象。对象属性如下）

restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) (...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },

1.restrict类型

2.priority优先级默认为0 越大越先

3.terminal是否停止优先级比较低的

4.template（字符串或函数）

5templateUrl（字符串或函数）

6replace 是否替换原来的标签。默认为不替换，即插入。

7.scope

<input type="text" ng-model="to"/>
<!-- 调用指令 -->
<div scope-example ng-model="to"
on-send="sendMail(email)"
from-name="ari@fullstack.io" />

scope: {
ngModel: '=', // 将ngModel同指定对象绑定
onSend: '&', // 将引用传递给这个方法
fromName: '@' // 储存与fromName相关联的字符串
}

8.transclude（看不懂用到时再去理解吧）

9.controller（字符串或函数）看不懂用到时再去理解吧

10.controllerAs（字符串）看不懂用到时再去理解吧

11.require（字符串或数组）用到的Controller名称集合。

12.compiled和link互斥，如果两个都有compiled函数当link的函数使用。

viewValue通过验证后才会赋值给modelValue。

13.ngModel属性$viewValue，$modelValue，$parsers，$formatters，$viewChangeListeners….form相似的一些属性$error.$dirty等。

在控制器中定义$render方法可以定义视图具体的渲染方式。这个方法会在$parser流水线
完成后被调用。

posted @ 2014-10-11 18:03 haiziguo 阅读(12772) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Angular权威指南学习笔记

第八章、指令

第九章 、内置指令

第十章、指令的详解

公告

第九章、内置指令