angularjs JSONP服务

来源：互联网发布：服装商品数据分析编辑：程序博客网时间：2024/06/05 12:45

直接上代码

<!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>

0 0