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:循环
- 数组里面的值不能重复重复会报错
<li ng-repeat="item in arr">{{item}}</li>
解决办法
<li ng-repeat="item in arr track by $index">{{item}}{{$index}}</li> - 其实不用解决一般会遍历对象
- <li ng-repeat="(k1,v1) in arr">{{k1}} :{{v1}}</li>另一种写法
- 数组里面的值不能重复重复会报错
- 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中
- mod.controller("controller名子",function(){
- 写法:1.写模块
- ng-app:相当于规定一个作用域