1、 下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中。
2、 制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代)。
3、 backmockup站点添加以下HTTP头
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:origin,x-requested-with,content-type
Access-Control-Allow-Methods: POST,GET,OPTIONS
Access-Control-Allow-Origin:*
(此处用来开启跨域访问,IIS中在HTTP响应头中添加)
4、 AngularJs 跨域访问使用$resource的JSONP技术,代码如下
.service(‘JsonSource‘, [‘$resource‘,function($resource) {
return $resource(‘http://127.0.0.1:801/index.asp‘, {}, {init:{method:‘JSONP‘,format: ‘json‘, params:{callback:‘JSON_CALLBACK‘},isArray:true}});
}])
其中init方法为自定义,因为需要用到method:‘JSONP‘,所以不能使用get、query等自带方法,数组直接用isArray设置。
params:{callback:‘JSON_CALLBACK‘}是关键点,JSON_CALLBACK为系统方法,会生成一个自增长ID,用以与客户端匹配,客户端用<%=request("callback")%>方式获得,并输出
angular.callbacks._0(
[{"name":"angular.callbacks._0","journal_id":"539016f202b418c1e6000019"}])
这个方法的原始形态是callback:‘JSON_CALLBACK‘,并不使用params,由于无法使用request获得参数,不知道服务器端怎么配置,理论上这个选项的安全性更高。
5、 数据读取调用JsonSource的init方法
function ($scope,JsonSource ) {
JsonSource.init(function(result){
$scope.journals = result;
});
}
通过ng-repeat="journal in journals" 循环输出
6、 跨站访问功能完成,整理成压缩文件angularjs-0.0-20140610-jsonp.zip。
angularjs 学习笔记(一) -----JSONP跨站访问,布布扣,bubuko.com
angularjs 学习笔记(一) -----JSONP跨站访问
原文:http://www.cnblogs.com/aaronjin/p/3795823.html