Angular权威指南学习笔记(转)

发布时间:2017-3-2 4:00:41 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Angular权威指南学习笔记(转) ",主要涉及到Angular权威指南学习笔记(转) 方面的内容,对于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的生命周期:

  1. 创建:当创建控制器和指令时。通过$inject创建新的作用域。并在新建控制器和指令运行时传进去。
  2. 链接:把作用域添加到自己的视图上,并创建事件,以便检测作用域变量的变化。
  3. 更新:每个子作用域会进行脏值检测。当检测到变化时,会回调指定的函数。
  4. 销毁:不使用的时间,销毁。

第五章.        控制器——是可以嵌套的,所以作用域包含作用域。demohttp://jsbin.com/URuyoG/1/edit

第六章.        表达式——手动和自动解析。自动通过$digest.如{{}}。手动可以在控制器中控制,让表达式不按套路出牌。

$parse用来访问作用域的数据和函数。

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

      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);
                });

上一篇:PHP 苹果消息推送
下一篇:下阴影

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。