angular1.2通过$http请求数据及跨域(兼容IE8)

最近准备要迭代个古老项目,和c++工程师合作做PC桌面应用.exe,因为桌面客户端需要缩包,原本30多M文件缩小到几M内,但提出的要求是需要前端混合的页面兼容到最低IE8。当然,项目还是前后端分离模式,本身项目是jq撸的,粗略看了下,没有看下去的欲望,近一年多都没怎么碰jQuery ,习惯了MVVM的快感,怎么办?

想起刚学MVVM时候我最开始是学的angular,但学的差不多时候,版本2发布了,升级版本后我写的demo都崩了,于是发现很多人遇到这个问题,所以就开始各种嫌弃它了,转向了vue.js怀抱,但angular有个很大优势,这玩意儿低版本传说中的脏检查模式是可以兼容到IE8的(版本<1.3)甚至IE7(需借助插件),这就不得不让我想到了它,因为vue.js的指令很多都是从angular中模仿过去的,所以撸起来还是相对轻松不少,但当时学的时候,只是学的基本语法,并没有去弄前后端交互ajax请求数据这些东西,所以赶紧看了下相关文档,也给需要搞老古董项目的同学做个笔记分享下经验。

先顺便说下做IE7兼容需要的东西

 

  • 1. 加载json2.js
  • 2. 加载html5shiv.js
  • 3. 加载angular.min.js文件
  • 4. 加载angular-ie7-support文件 (这个文件主要解决ng的$sceProvider的问题)

 

如何请求数据

在angular1.5x版本以下有个内置服务$http,它只是对原始ajax做了基本封装,示例:

1
2
3
4
5
6
var app = angular.module('myApp', []);
app.controller('ajaxCtrl', function ($scope, $http) {
$http.get('http://api.douban.com/v2/movie/top250?start=25&count=25').success(function (data) {
$scope.users = data;
});
});
POST 与 GET 简写方法格式:
1
2
3
4
5
6
7
8
9
10
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
//更多。。。
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

$http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象。

$resource(angular-resource.min.js)就是为这一功能而设计的。AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型

如何跨域进行jsonp请求数据

1
2
3
4
5
6
7
var app = angular.module('myApp', []);
app.controller('ajaxCtrl', function ($scope, $http) {
$http.jsonp("https://dfttdetail.dftoutiao.com/newsmore_h5detail/newspool?jsonpcallback=JSON_CALLBACK").success(
function (data) {
console.log('jsonp', data)
});
});

重点:参数为callback=JSON_CALLBACK,angular会自动为你替换你的JSON_CALLBACK(固定值)并分配callbackName。否则你能请求到数据,但无法走进sccess里面,是因为没有触发angular为你设置的callback

 

喜欢这篇文章吗?按个赞吧,不会令你失望!

发表评论