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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

AngularJs 服务之jsonp解决跨域问题

AngularJS $http跨域
  • u011301203
  • u011301203
  • 2016年11月19日 01:42
  • 985

AngularJS学习(九) $resource服务 前后台交互ajax

要在项目中彻底的使用单入口的前端mvc框架来开发,那么都会把和后端交互获取数据改成异步Ajax,这样的话,后端就相当于一个WebServices,比较轻量级的方案就是RESTful,这个不是我们要讨论...
  • Mooner_guo
  • Mooner_guo
  • 2015年01月07日 14:15
  • 3356

angularjs中的几种服务的详细分析(转)

总体介绍在一个分层良好的 Angular 应用中,Controller 这一层应该很薄。也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里。为此,理解 AngularJS 中的...
  • qq_29287973
  • qq_29287973
  • 2017年07月01日 18:01
  • 574

AngularJS常用服务($http、$location、$sce等)

这篇博客,只是简单地说下AngularJS中的常用的系统(自带)服务。如果逻辑不清晰,就当作是一个参考手册吧,来查查用法什么的。 另外,附上一些参考网站: AngularJS手册:http://m...
  • VitaLemon__
  • VitaLemon__
  • 2016年08月09日 17:29
  • 4040

封装自己的jsonp、元素Ajax

在封装自己的JSONP 服务之前,我们要先明白,什么是同源?为什么要跨越? 首先我们要明白,同源策略是浏览器的一种安全策略,所谓同源是指,域名、协议、端口完全相同。 为什么要跨越?在开始前简单介绍...
  • u010427666
  • u010427666
  • 2016年12月30日 22:59
  • 813

基于springMVC与angularJS的跨域问题解决方案

1.JSON的使用一:知识点1.jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。 2.当请求数据类型为jsonp时,会将c...
  • qq_24005787
  • qq_24005787
  • 2016年08月17日 17:43
  • 560

AngularJs基础——自定义服务的三种方法以及provider供应商

AngularJs提供了三种方法可以自定义服务,分别是provider、factory、service.请注意三者之间的区别。 有三种方式可以自定义服务: 第一种方式,在module中以回调函数的形式...
  • bboyjoe
  • bboyjoe
  • 2016年01月04日 18:34
  • 2041

AngularJS的自定义服务,factory、provider、service、constant、value等方法的区别

module - filter() 自定义过滤器 - directive() 自定义指令 - factory() 自定义服务 - provider() 区别 ...
  • xyphf
  • xyphf
  • 2016年12月29日 16:19
  • 1447

深究AngularJS——自定义服务详解(factory、service、provider)

前言 3种创建自定义服务的方式。 Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分...
  • zcl_love_wx
  • zcl_love_wx
  • 2016年05月14日 09:56
  • 32991

angularjs的使用:模块,服务,控制器(2)

1. *模块 1.1 在AngularJS中,模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码。 1.2 定义模块: var myM...
  • wangzhanzheng
  • wangzhanzheng
  • 2016年08月17日 16:53
  • 1129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs JSONP服务
举报原因:
原因补充:

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