angularjs JSONP服务

原创 2016年05月31日 13:51:57

直接上代码

<!DOCTYPE html>

<html  ng-app="myApp.services">
<head lang="en">
    <meta charset="UTF-8">
    <title>服务</title>
    <link rel="stylesheet" href="Presently/css/bootstrap.css"/>
</head>
<body>
<div ng-controller="ServiceController">
    <input type="text" ng-model="username"  placeholder="Enter a GitHub username, like auser" />
    <pre ng-show="username">{{ events }}</pre>
</div>
<script src="jquery.js"></script>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
    var app = angular.module("myApp.services",[]);
    //服务
    app.factory('githubService',['$http',function($http){
        var doRequest = function(username,path){
            return $http({
                method:'JSONP',
                url:'https://api.github.com/user/'+username+'/'+path+'?callback=JSON_CALLBACK'
            })
        }
        return{
            events:function(username){return doRequest(username,'events')}
        }
    }]);
    //服务注入到控制器
    app.controller('ServiceController',['$scope','$timeout','githubService',function($scope,$timeout,githubService){
        var timeout;
        $scope.$watch('username', function(newVal) {
            if (newVal) {
                if (timeout) $timeout.cancel(timeout);
                timeout = $timeout(function() {
                    githubService.events(newVal)
                            .success(function(data, status) {
                                $scope.events = data.data;
                            });
                }, 350);
            }
        });
    }]);
</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

前端与服务器分离开发出现跨域问题,jsonp与gulp-connect注意点,angularjs改造

预备 在网络中,受到浏览器内部机制的限制,本域内,也就是自身服务器下的服务的js是不能操作其他域下的页面对象,或者去请求域下的数据,这个时候就会产生跨域问题。 有些人会奇怪,为什么cdn或者图片加...

springmvc和Angularjs 跨域传输 jsonp

angular.module('eduApp') .factory('ClassService', ['$http', function ($http) { // Serv...
  • Hajnal
  • Hajnal
  • 2016年06月16日 18:48
  • 917

AngularJS中$http.jsonp跨域请求问题

AngularJS中$http.jsonp跨域请求问题,请求URL后必须加callback=JSON_CALLBACK参数

AngularJs最简单解决跨域问题jsonp案例

原文地址:http://www.manks.top/angularjs_ajax_jsonp.html 首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要...

AngularJs中的JSONP跨域访问数据传输问题

json 、jsonp一个是JavaScript Object Notation,一个是JSON with Padding ,二个很像,但是其实不是一回事。JSON是一种数据交换格式,而JSONP是一...
  • ggithub
  • ggithub
  • 2016年09月24日 16:16
  • 85

SpringMVC3.2.x整合fastJson实现JSONP服务端

因为安全因素,ajax是不能进行跨域请求的,但是机智的程序员们发明了JSONP。Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。...

用nodejs实现json和jsonp服务

一、JSON和JSONP       JSONP的全称是JSON with Padding,由于同源策略的限制,XmlHttpRequest只允许请求当前源(协议,域名,端口)的资源。如果要进行跨域...
  • gykxp
  • gykxp
  • 2012年04月22日 16:40
  • 12190

Jsonp跨域请求服务端之动态替换页面数据

html页面代码 Android 下载 fu

Spring3.2.x整合fastJson实现JSONP服务端

因为安全因素,ajax是不能进行跨域请求的,但是机智的程序员们发明了JSONP。Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。...
  • W441675
  • W441675
  • 2014年08月28日 18:31
  • 805

AngularJs几种服务区别

AngularJs几种服务区别
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs JSONP服务
举报原因:
原因补充:

(最多只允许输入30个字)