angular交互:
1、请求一个文本文件,内容显示到页面
发现问题:
jquery的ajax请求数据——正常
请求回来的数据放到 $scope.arr —— 正常
问题: 没有显示在页面
因为: angular 比较封闭,和其它框架、库配合不好。
2、angular提供了自己的做数据交互的方式:
$http —— 依赖项
依赖项: $scope $http
用法:
$http.get();
$http.post();
$http.jsonp();
$http.get('请求地址').then(成功的回调,失败的回调);
$http.get('a.txt').then(r=>{
//r 就是成功后的返回对象 ***r完整的angular http返回对象
// r.data 才是数据
},err=>{
//err 失败信息对象
});
小总结:
ng-src
$http.get('接口/地址').then((r)=>{
r//完整的对象
//{data: Array[4], status: 200, config: Object, statusText: "OK"}
r.data
},(r)=>{
console.log(r)
})
3、Promise
回调函数 —— 恶梦 噩梦 解决$ajax嵌套和回调函数(
Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数
)
1)用法——基本用法:
resolve: 成功
reject: 失败
let pro = new Promise((resolve,reject)=>{
$.ajax({
url:'',
dataType:'json',
success:r=>{
resolve(r);
},
error:err=>{
reject(err);
}
});
});
pro.then(成功的回调,失败的回调);
pro.then((r)=>{
//r 成功后返回结果 ,处理成功的数据信息
},(err)=>{
//err 失败对象,处理失败信息
});
2)用法 —— 常规用法
Promise.all();
批量处理异步请求,统一处理成功的回调
Promise.all([
//请求1 的 Promise
//请求2 的 Promise
]).then(成功回调,失败回调);
全部成功才算成功,有一个失败就是整体失败。
2、交互
$http —— 依赖项 ($scope $http)
$http.get();
$http.post();
$http.jsonp();
$http.get('请求地址').then((r)=>{
//成功
//r.data
},(err)=>{
//失败
});
3、Promise
1)基本用法,发一个请求
new Promise((resolve,reject)=>{
$.ajax({
url:
dataType:
success(r){
resolve(r);
},
error(err){
reject(err);
}
});
}).then((r)=>{
//成功了
},(e)=>{
//失败了
});
2)Promise.all()
Promise.all([
//发请求的Promise对象
new Promise(),
new Promise(),
....
]).then(r=>{
//以上数组中,指定的所有的请求,全部都成功,才是成功
},err=>{
//以上数组中,指定的所有的请求,只要有一个失败,就是失败
});
没法做SEO
怎么知道一个变量发生了改变?
1.添加一个方法(set()) 设置变量的值 set 被调用时候 比较一下
2.一般脏检查,将对象复制一份快照,在某个时间 比较现在对象与快照的值
如果不一样就表明发生变化 这个策略要保留两份变量 而且要遍历对象
比较属性 这样会有 一定性能问题
3.它的策略
1.不会脏检查所有对象 当对象被绑定到html中 这个对象添加为检查对象
2.不会脏检查所有的属性,同样当属性被绑定后 这个属性会被列为检查的属性
在它初始化时 会将绑定的对象的属性添加为监听对象 也就是说一个对象绑定N个属性
就会添加N个watcher (意思是 绑定一个name属性 然后n个地方用 就会添加n个watcher);
什么时候去脏检查
angular所系统的方法中都会触发比较事件
比如:controller初始化的时候 所有ng-开头的事件执行后 都会触发脏检查
不要在conroller中做以下事情
1.不要在controller中做DOM操作 大大影响了应用逻辑的可测试性 可以把表现逻辑抽取到directive(指令中);
2.输入格式化 使用angular form controls代替 (去看)
3.输出格式化 使用angular filter 代替
4.执行无状态或者有状态的、controller共享的代码 angular service(去看)代替