AngularJs交互

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(去看)代替

你可能感兴趣的:(AngularJs交互)