zoukankan      html  css  js  c++  java
  • AangularJS入门总结二

    1. 双向数据绑定:在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然。一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model。
    2. $scope:是一个把view(DOM元素)连接到controller上的对象。$scope是model,它提供一个绑定到DOM元素上的“执行上下文”;
    3. $scope:实际就是一个JavaScript对象,controller和view都可以访问它,可以利用它在两者间传递信息;$scope 里,既存储数据,又存储将要运行在view上的函数;
    4. $rootScope:每个anguler应用都会有一个最顶层的scope,就是$rootScope,它对应着包含含有ng-app指令属性的那个dom元素;
    5. module(模板)

      <html ng-app="mainApp"> 指定angular的作用域是在<html>标签以内部分; var mainApp= angular.module(mainApp, []);在js文件中调用angular对象的module方法来声明一个模块,模块的名字和ng-app的值对应。就可以让angular运行起来了;

    6. ng-controller:这个指令给DOM元素创建了一个新的$scope 对象,并将这个$scope 对象包含进外层DOM元素的$scope 对象里。
    7. 所有scope都遵循原型继承,这意味着它们都能访问父scope们。对任何属性和方法,如果AngularJS在当前scope上找不到,就会到父 scope上去找,如果在父scope上也没找到,就会继续向上找,直到$rootScope 上。如果controller是多层嵌套的,就会从最里面一直往外找,知道最上层;有些指令属性可以选择性地创建一个独立的scope,让这个scope不继承它的父scope们;
    8. Angular中的"ajax"----$http:$http 服务是AngularJS的核心服务之一,它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流;    (1)  get方法:$http.get("url?id="+id) .success(function(data){}).error(function(){});               (2)  post方法:$http.post("url",{username:$scope.username,pwd:$scope.pwd},success(function(data){}),error(function(){});
    9. 表达式: 表达式中不可以使用循环语句、判断语句,事实上在模板中使用复杂的表达式也是一个不推荐的做法,这样视图与逻辑就混杂在一起了;
    10. 过滤器(filter): (九种) Angular内置了一些过滤器:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序);
    11. 过滤器使用方式:自定义过滤器,这个就强大了,可以满足任何要求的数据处理;
    12. 明白内置的filter的使用,以及如何定义一个filter。

      filter的两种使用方法:

          1. 在模板中使用filter

            我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:

                  {{ expression | filter }}

            也可以多个filter连用,上一个filter的输出将作为下一个filter的输入:

                  {{ expression | filter1 | filter2 | ... }}  

            filter可以接收参数,参数用 : 进行分割,如下:

                  {{ expression | filter:argument1:argument2:... }}  

            除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:

                  <span ng-repeat="a in array | filter ">

          2. 在controller和service中使用filter

             js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,

            代码如下:

              app.controller('test',function($scope,currencyFilter){

                  $scope.num = currencyFilter(123); 

              }  

            在模板中使用{{num}}就可以直接输出$123.00了!

            在服务中使用filter也是同样:

              要在controller中使用多个filter,并不需要一个一个注入吗,提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了;

              使用方法如下:

              app.controller('test',function($scope,$filter){

                  $scope.num = $filter('currency')(123);  

                  $scope.date = $filter('date')(new Date()); 

              }  

           自定义过滤器:

              filter的自定义方式也很简单,使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果;

              例如:返回一个数组中下标为偶数的元素;

                  /* Controller js */

                  mainApp.filter("oushu",function(){

                      return function(Array){

                              var array = [];

                              for(var i=0;i<iArray.length;i++){

                                      if(i%2!==0){

                                          array.push(Array[i]);

                                      }

                              }

                              return array;

                        }

                  });

     13.指令: 指令可以用来创建自定义的标签。可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。

          模板中可以使用的东西有以下四种:

            1.指令(directive):angular提供的或者自定义的标签和属性,用来增强HTML表现力;

            2.标记(markup):即双大括号{{}},可将数据双向绑定到HTML中;

            3.过滤器(filter):用来格式化输出数据;

            4.表单控制:用来增强表单的验证功能。

          指令的几种使用方式如下:

            作为标签:<my-dir></my-dir>

            作为属性:<span my-dir="exp"></span>

            作为注释:<!-- directive: my-dir exp -->

            作为类名:<span class="my-dir: exp;"></span>

            常用的就是作为标签和属性;

          样式相关的指令:

            ng-class: 给元素绑定类名;

                                        表达式的返回值可以是类名字符串,用空格分割多个类名;

                                         类名数组,数组中的每一项都会层叠起来生效;

                                         一个名值对应的json对象,其键值为类名值为boolean类型,当值为true时,该类会被加在元素上。

            ng-class-odd  ng-class-even 用来配合 ng-repeat分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。

            ng-style:用来绑定元素的css样式;

            ng-show ng-hide: 元素显隐控制,ng-show和ng-hide的值为boolean类型的表达式,当值为true时,对应的show或hide生效;

          表单控件功能相关指令:

            ng-checked  控制radio和checkbox的选中状态

            ng-selected  控制下拉框的选中状态

            ng-disabled  控制失效状态

            ng-multiple  控制多选

            ng-readonly 控制只读状态

             以上指令的取值均为boolean类型,当值为true时相关状态生效。

            上面的这些只是单向绑定,只是从数据到模板,不能反作用于数据。要双向绑定,还是要使用 ng-model;

             事件绑定相关指令:

            ng-click

            ng-change

            ng-dblclick

            ng-mousedown

            ng-mouseenter

            ng-mouseleave

            ng-mousemove

            ng-mouseover

            ng-mouseup

            ng-submit

            事件绑定指令的取值为函数,并且需要加上括号,例如:

            <select ng-change=”change($event)”></select>  

            然后在controller中定义如下:

            $scope.change = function($event){

                   conolse.log($event.target);

            }  

            在模板中可以用变量$event将事件对象传递到controller中;

          特殊的指令:

            ng-src:angular框架时在DOM内容加载完成之后才开始发挥作用的,如果模板中存在<img src="{{url}}">,那么在

                页面开始在加载angular完成之前,页面会一直显示一张错误的图片,因为路径还没有被替换;为了避免这种情况,

                我们使用ng-src指令,这样在路径被正确得到之前就不会显示找不到图片。

            ng-href: 同上理,<a>标签的href属性也需要换成ng-href,这样页面上就不会先出现一个地址错误的链接;

          我们在模板中使用{{}}显示数据时,在angular编译完成之前页面会显示出大括号及里面的表达式。为了避免这个,ng中有一个与{{}}等同的指令:ng-bind,

          同样用于单向绑定,在页面刚加载的时候就不会显示出对用户无用的数据了。尽管这样,{{}}那么好用,还不能用了不成?好消息是我们依然可以使用。因为

          编写的是单页面应用,页面只会在加载index.html的时候出这个问题,只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的,

          就可以放心使用{{}}了。

         自定义指令: ()

      14.   服务:作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块;

              系统内置的服务以$开头,系内置的指令以ng开头;

            定义服务的方式:

                使用系统内置的$provide服务;

                使用Module的factory方法;

                使用Module的service方法。

              使用这三种方式来做一个从远程获取数据的服务:

              1)使用内置的$provide服务;

                var mainApp=angular.module("mainApp",[],function($provide){

                    $provide.factory("getData",function(){

                      var data=json;

                      return data;

                  })

                })

              2) 使用factory方式:

                mainApp.factory("getData",function(){

                      var data=json;

                      return data;

                })

              3)使用service方式:

                mainApp.service(getData,function(){

                                        

                });

             Module的service方法,没有return任何东西,因为service方法本身返回一个构造器,系统会自动使用new关键字来创建出一个对象。

             所以在构造器函数内可以使用this,这样调用该服务的地方便可以直接通过getData.属性名 的方式来访问数据了;

                            自定义服务,将$http封装成jq方式的ajax提交方式:

                mainApp.factory("ajax",function($http){
                      return function(config){
                              if(config.type == "get"){
                                   var param="?";
                                  for(var key in config.data){
                                      param+=key+"="+config.data[key]+"&";
                                  }
                                    $http.get(config.url+param).success(config.success);
                              }else{
                                    $http.post(config.url,config.data).success(config.success);
                                  }
                        };
                    });

              使用:

              regApp.controller("regconstructor",function($scope,$http,ajax,$location){

                        ajax({
                                       url:"xxx.php",
                                        type:"get",
                                        data:{
                                            username:$scope.usersname
                                        },
                                        success:function(data){
                                              if(data.mes == "0"){
                                                    $scope.nameinfo="用户名已存在";
                                                    $scope.namestyle={color:"red"};
                                              }
                                      
                                            }
                                  });

               });

       15. 依赖注入DI: 

            例如:mainApp=controller("testDI",function($scope,$loaction){});

            这里我们只是声明了$scope,$loaction这两个服务,所需的其他代码,框架已经帮我们注入了;

       16. 路由:ajax的一个致命缺点就是会导致浏览器后退按钮失效;

       17. 动画效果:可以用CSS3或者JS实现,用JS实现需要用到其他的js库来支持,因为底层实现还是靠其他js库,angular只是将它封装好,更容易使用;

  • 相关阅读:
    回望2010,展望2011
    Java加密解密
    纠正平时代码中一些简单的误区(附代码)(不断收集)
    Android模拟器代理上网
    ExifInterface 获取GPS数据
    用异或加密(Java版)
    解决Conversion to Dalvik format failed: Unable to execute dex: null
    Android如何快速卸载apk
    2010年的最后一天,我又辞工(日记)
    项目管理学习资料(经典)
  • 原文地址:https://www.cnblogs.com/liaolei1/p/6843981.html
Copyright © 2011-2022 走看看