Angular权威指南学习笔记(转)
http://www.cnblogs.com/lzhp/p/4000741.html
第一章. 初识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.
第八章、指令
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动态设置元素类。
<div ng-class="{red: x > 5,blue:x<=5}" >或<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
第十章、指令的详解
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流水线
完成后被调用。
Angular权威指南学习笔记(转)的更多相关文章
- Angular权威指南学习笔记
第一章. 初识Angular--Angular是MVW的Js框架. 第二章. 数据绑定--ViewModel中不仅可以含有变量,还可以还有事件.可以通过事件来控制变量的值改 ...
- HTTP权威指南-学习笔记
目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...
- JavaScript 权威指南-学习笔记(一)
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- Hadoop权威指南学习笔记二
MapReduce简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.n ...
- Hadoop权威指南学习笔记一
Hadoop简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出.一起学习一起进步. 转载请注明:http://blog.csdn.net/ ...
- Hadoop权威指南学习笔记三
HDFS简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考.有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my ...
- IDA Pro权威指南学习笔记(一)
一直不懂逆向,最近刚好不忙,于是学习逆向,用来做笔记,顺便和大家分享交流. 参考书籍<IAD PRO权威指南> 工具: PETools: ETools 是另一款很好的PE文件编辑工具,以前 ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
随机推荐
- CocoaPods安装以及相关问题解决
Mac OS X上安装 Ruby环境 安装RVM $ curl -L https://get.rvm.io | bash -s stable 关闭终端,新开另外一个终端(新打开的终端会自动载入RVM环 ...
- UML类图的关系
多态 泛化(Generalization) [定义]:是一种继承关系,表示一般与特殊的关系,它指定了子类如何特化父类的所有特征和行为 [UML表示]:带三角箭头的实线,箭头指向父类 [代码表现]:A类 ...
- SQL Server(三)——增、删、改、查
一.数据库操作 create database 数据库名称 ——创建drop database 数据库名称 ——删除use 数据库名称 ——使用go 两条SQL语句之间分隔 二.表的操作 create ...
- MySQL 5.6 主从复制如何处理——触发器,函数,存储过程,调度事件
截图来自MySQL5.6的pdf版文档. 说明: 1)基于语句的复制时,trigger会在slave上执行,所以slave上也需要有trigger的定义,不然会导致主从数据不一致的: 2)基于行的 ...
- mysql5.6源码安装
1.环境介绍: 包:mysql-5.6.24.tar.gz 平台:centos6.5 2.安装cmake编译工具和依赖包: yum install cmake -y yum install ncurs ...
- Linux IPC udp/ip socket 编程
模型 #include <unistd.h> #include <sys/types.h> #include <sys/socket.h> #include < ...
- x01.FileProcessor: 文件处理
姚贝娜落选,意味着好声音失败.“我们在一起”的精彩亮相,正如同她的歌声,愈唱愈高,直入云霄. 文件处理,无外乎加解密,加解压,分割合并.本着“快舟"精神,花了两天时间,写了个小程序,基本能满 ...
- Centos 内存占满 释放内存
free -m 查看内存使用情况 top,然后按下shift+m,按内存占用百分比排序 centos 为了提高效率,把部分使用过的文件缓存到了内存里.如果不需要这样的文件性能,那就可以释放. 如下两个 ...
- Centos6.6下安装MySQL5.6
1.先查看本机上已经安装的MySQL rpm –qa | grep -i mysql 如果存在信息说明已经安装MySQL 需要完全卸载以前的MySQL yum remove mysql mysql-s ...
- CDN下nginx获取用户真实IP地址
随着nginx的迅速崛起,越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速,但是随之也遇到一个问题:nginx如何获取用户 ...