angularJs复习

1.angular是什么?----MVVM

        MVC:经典------数据(ajax,jsonp,数组,ng-model)、视图(html,css,动画,用户操作)。控制器
            mvc:v->c->m->v
            经典模式相互依赖耦合性太高:c会非常臃肿
                m:model模型数据---数据层
                v:view 视图---表现层
                c:control控制器---业务逻辑--控制层
        MVP:(presenter主持人):v《--》p《--》m
                m,v不在有关系,p臃肿
         MVVM:
                这里只是将c变得不再臃肿,平衡了复杂度,m,v会完成一部分功能
                v《--》vm《--》m

2.指令

  •  ng-model:双向绑定:自动同步视图与数据
  • v《------》m
  •                 在input中输入option的value相对应的内容option会发生改变,
                    选择option后input中的内容会变成相对应的option的value值
  • ng-bind:单向绑定
  • ng-init:初始化:给变量赋初始值:放哪都行,只要在app作用域中
  • ng-repeat:循环
    •  数组里面的值不能重复重复会报错
        
    • {{item}}

    •      解决办法
                   
    • {{item}}{{$index}}
    •               其实不用解决一般会遍历对象
    • {{k1}} :{{v1}}
    • 另一种写法
  • ng-click/mouseover,,,,点击事件能拿到ng里面的变量
  • ng-controller:控制器:
    • 写法:1.写模块
              let mod = angular.module('模块名字',[依赖]);
      • mod.controller("controller名子",function(){
        • 功能,代码
        • 依赖:
          • $scope
          • $http
            • $http.get
            • $http.post:解决数据传输格式的问题---》jquery,ajax:的请求数据方式:x-www-form-urlencoded
                      angular:json:不支持
              • headers:{'content-type':'application/x-www-form-urlencoded'},
              •   transformRequest:function(obj){
                                        let arr = [];
                                        //console.log(obj);
                                        for(let name in obj){
                                            arr.push(`${name}=${obj[name]}`);
                                        }
                                        //alert(arr);
                                        return arr.join('&');
                                    }
          • $interval
          • timeout
          • $q.all
          • $q.race
      • })
                2.用模块
                ng-app="模块名"
                ng-controller="controller名字"
                打通ng和js
                angular中的一切数据都在scope中
  • ng-app:相当于规定一个作用域

 

 

你可能感兴趣的:(angular)