美文网首页我爱编程
Angular复习笔记

Angular复习笔记

作者: 2e9a10d418ab | 来源:发表于2017-05-31 20:36 被阅读0次

                《复习笔记》

    一、ajax

    ajax:无刷新从服务器取数据;

    缓存:浏览器针对同一个网址只会访问一次

    ajax防止缓存方法:

    添加随机数【随机因子】

    ajax注意:文件编码格式要保持一直

    从后台取数据传过来的都是字符串

    ajax:不允许跨域取数据

    创建post请求:

    oAjax.open('post',url,true);

    oAjax.setRequestHeader('Content-type','Application/x-www-form-urlencoded');

    oAjax.send(json2url(json.data));

    创建get请求:

    oAjax.open('get',urk,true);

    oAjax.send();

    转换data格式:

    function json2url(json){

       var arr = [];

       for(var name in json){

    arr.push(name + '=' + json[name])

    }

    return arr.join('&');

    }

    eval:就是把字符串解析成js可移执行的任何代码

    jsonp:跨域取数据

    实现原理:动态添加script标签

    script:是一次性标签;改变src属性需要重新加载执行

    onkeydown:键盘按下事件

    onkeyup:键盘抬起事件

    event:存储或描述事件更加详细的信息

     event.clientX;

    event.clientY;

    event.keyCode;

    event.cancelBubble = true;//兼容低版本IE 阻止事件冒泡

    event.stopprapagation   //标准浏览器 阻止事件冒泡

    事件冒泡:

     子元素的事件可以传递给父元素,如果父元素有相同的事件,会触发,否则会继续往上冒泡

    事件捕获:Obj.setCapture();//IE独有的

    把多有的精力都放到某一个事件上,点击页面任何地方都相当域在点   击这个按钮;

      释放捕获:obj.releaseCapture();//IE独有的;

    事件绑定[监听]:

    obj.addEventListener(事件名,函数名,false);事件名不加on;

      obj.attachEvent(事件名,函数名);事件名必须加on;

    同一个元素,同一个事件,需要执行不同的方法;

        删除事件绑定:

    obj.removeEventListener(事件名,函数名,false);//事件名不加on;

    obj.detachEvent(on+"事件名",函数名);

    事件委托:

     把子元素的事件委托给父元素来执行;

     oTarget = oEvent.srcElement || oEvent.target;

     if(oTarget.targName == 'UL'){

    //code

       }

    阻止事件:

       组织事件的兼容写法:

    1、if(event.preventDfault){

       event.preventDefault();//标准浏览器

    }else{

       event.returnValue=false;//IE浏览器

    }

    2、return false 常用的组织事件方式,但后面的代码不会再触发

    事件移除:removeEventListener(event,function);

    事件源:

      IE:?window.event.srcElement

    标准:event.target;

    -----------------------------------------------------------------------------------

    键码:

      ctrl:ctrlKey

      shift:shiftKey

      alt:altKey

    -----------------------------------------------------------------------------------

    jsonp:

     跨域取数据;

    script是一次性的;src属性需要加载执行;

    事件冒泡:

     子元素的事件可以传递给父元素,父元素有相同事件会执行,否则会一直网上冒泡;

     取消事件冒泡:

     oEvent.cancelBubble = true;

    事件捕获:

     obj.setCapture();IE独有的;

    事件释放捕获:

     obj.releaseCapture();IE独有的;

    事件绑定:

     obj.addEventListener(sEv,fn,false);-->事件名不加on;

     obj.attachEvent('on'+sEv,fn); --->事件名必须加on;

    事件解除绑定:

     obj.removeEventListener(sEv,fn,false);--->事件名不加on;

     obj.detachEvent('on'+sEv,fn); --->事件名必须加on;

    事件委托:

     把子元素的事件委托给父元素来执行;

     oTarget = oEvent.srcElement || oEvent.target;

     if(oTarget.tagName == 'UL'){

       //code;

     }

    ------------------------------------------------------------------------------------

    键码:

     ctrl:ctrlKey

     shift:shiftKey

     alt:altKey

    ----------------------------------------------

    AngularJS

     概念:Angular.js是一个MVC的框架,致力于解决ajax开发过程中的问题;由google团队开发;现在最新版本是4.1.0;文件需要放到服务器环境下执行;

     angular支持模块化开发;

     上课我们使用1.3.10;

     1:主版本号

     3:次版本号

     10: 修订号;

     M:model数据;

     V:view视图;

     C:controller控制器;

     官网: angularjs.org;

    angular.bind();改变this的指向;

     angular.bind(改变后的this的值,改变哪个函数的this,参数1,参数2···),改变后返回一个新的函数,新函数需要调用执行;

    angularJS:

        是一个MVC的框架,致力于解决ajax开发过程中的问题

    //angular.element().ready();类似于window.onload

    angular.element(document).ready(function(){

    var oDiv = document.getElementById('box');

    angular.element(oDiv).on('click',function(){

    angular.element(this).css('background','red');

    })

    })

    function show(a,b){

    alert("this:"+this+'\n'+"a:"+a+'\n'+"b:"+b);

    }

    //show();//window

    //angular.bind 改变this指向

    var c = angular.bind(12,show,"1212","3443");

    c();

    var arr = [1,2,3];

    var arr1 = [];

    //angular.copy 克隆

    angular.copy(arr,arr1);

    console.log(arr1);

    var arr = [12232,2323,232];

    //检测arr是不是一个数组 angular.isArray; 值为布尔值

    alert(angular.isArray(arr));

    var oDate = new Date();

    //检测其是不是一个日期对象 angular.isDate; 值为布尔值

    alert(angular.isDate(oDate));

    var str1 = "wellcom to bj";

    //angular.uppercase()转大写

    console.log(angular.lowercase(str1));

    var str2 = "WELLCOM TO BJ";

    //angular.lowercase()小写

    console.log(angular.uppercase(str2));

    //angular.equals();比较a,b是否相等  ***经过angular转换之后 NaN == NaN

    var a = NaN;

    var b = NaN;

    alert(angular.equals(a,b));

    //angular.forEach(循环谁,fn(key,value))循环  value:值 key:下标

    var arr = ["tiger","monkey","dog","pig","elephent"];

    angular.forEach(arr,function(value,key){

    console.log(value+":"+key);

    //value:值

    //key:下标

    })

    ---------------------------------------------------------

    命名空间:

    以ng- 开头

    得到数据:

     ng-model="数据名字" 针对天生就产生数据的标签,比如input标签;

    展示数据:

     方法1.{{数据名字}}

     ng-bind="数据名字":好处在于错误的时候不会出现模板标记

    开启angular的应用模式:

     ng-app

     ***ng-app一个页面只能出现一次;

       解决方法:

    ng-init:初始化数据

     ng-init="数据"

    angular中的事件:

     去掉on,加上ng-开头;

     ng-click:

     ng-mouseover:

     ng-mouseout:

    ng-show="true/false" 是否显示;

    ng-hide="true/false" 是否隐藏;

    ng-repeat:循环

     

         

    • {{value}}
    • angular控制器:

       1:定义控制器;

      1>.定义一个模块:

      var app = angular.module(模块的名字,[依赖的模块],配置函数);

      前两个参数是必须的,最后一个不是必须的;

      第二个参数如果有依赖的模块,就写,没有就空着;

      2>.定义一个控制器:

      app.controller('控制器的名字',function($scope){

      $scope.a = 12;

      });

       2:使用一个控制器;

         ng-controller="控制器的名字"

         展示数据:{{a}}

      相关文章

        网友评论

          本文标题:Angular复习笔记

          本文链接:https://www.haomeiwen.com/subject/upontxtx.html