问题
Right now I've created a JS API with JQuery, but I'm wondering if it could be done with AngularJs.
For example, Imagine a small API like the following:
var $myapi= $myapi|| {};
;(function($, window, document, undefined){
_call_myapi_jsonp: function(params,controller,action,eventName){
if (!params) params = {};
var url = this.urls.base+"/"+controller+"/"+action+"?callback=?";
if (params.callback)
url = this.urls.base+"/"+controller+"/"+action+"?callback="+params.callback;
url = url + "&_"+new Date();
delete params.callback;
$.ajax({
url: url,
data: params,
crossDomain:true,
dataType:'jsonp',
cache:false,
ajaxOptions: {cache: false},
jsonp: params.callback?false:true,
success:function(data,status){
if (eventName && eventName!=""){
$($myapi).trigger(eventName,data);
}
}
});
},
level: {
list: function(params){
params = params || {};
params.max = params.max!=undefined?parseInt(params.max):$myapi.defaults.levels.max;
params.page = params.page!=undefined?parseInt(params.page):$myapi.defaults.levels.page;
params.showActives = params.showActives!=undefined?params.showActives:$myapi.defaults.levels.showActives;
$myapi._call_myapi_jsonp(params,"level","listJSONP","myapi.level.list");
},
info: function(params){
$myapi._call_myapi_jsonp(params,"level","showJSONP","myapi.level.info");
}
}
}
I've been searching through AngularJs Documentation and also searching in Google, but I have not found a way in which the code in Jquery could be made in AngularJS. I thought maybe using $routeProvider it could be done, but I have'nt found any example nor documentation on how to use $routeProvider to make jsonp calls without showing a template or redirecting to some place.
回答1:
It sounds like what you need is a service, akin to what's being done here:
Recommended way of getting data from the server
http://jsfiddle.net/wpPhY/
but with the inclusion of $resource:
http://docs.angularjs.org/api/ngResource.$resource
Here's a basic example of a JSONP service to query Twitter (taken from http://egghead.io):
JSFiddle Demo: http://jsfiddle.net/gavinfoley/DJ6da/
angular.module('Twitter', ['ngResource']);
angular.module('Twitter')
.controller('TwitterCtrl', ['$scope', '$resource', function ($scope, $resource) {
$scope.twitter = $resource('http://search.twitter.com/:action',
{action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}});
$scope.doSearch = function () {
$scope.twitterResult = $scope.twitter.get({q:$scope.searchTerm});
};
}]);
Also, it would be worth taking a look at using Breeze with Angular. I haven't used it myself but you can create some really cool CRUD apps with it:
http://www.breezejs.com/samples/todo-angular
If however you're looking to gain access to functions or properties defined inside of a particular Angular controller (or scope) from jQuery, take a look at the Plnkr and code below.
To be honest, I really wouldn't go down this road if at all possible. It would be better to remove jQuery from your solution altogether and just stick with Angular. Meaning write your Angular API or service and consume it using Angular controllers/directives etc.
In other words, if you're going to use Angular in your application then go "all Angular". Don't try to mix and match with jQuery. It will only slow you down and make your code harder to maintain.
Full Plnkr Demo: http://plnkr.co/edit/X5SfKD?p=preview
HTML
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="parent" data-ng-controller="ParentCtrl">
<span id="someSpan">This is {{name}}.</span>
<div id="child" data-ng-controller="ChildCtrl">This is {{name}}.</div>
Get latest tweet for: <input type="text" data-ng-model="twitterUser" />
<button data-ng-click="getLatestAngularTwitterPost()">Get Tweet</button><br/><br/>
Latest {{searchTerm}} Twitter post:
<div>
<img id="twitterProfileImage" data-ng-src="{{profileImage}}" />
<span data-ng-bind-html-unsafe="tweet" id="tweet"></span>
</div>
</div>
</body>
</html>
Angular app - myApp.js
angular.module('myApp', []);
angular.module('myApp')
.controller('ParentCtrl', function ($scope, $http) {
$scope.name = "parent";
$scope.testFunc = function () {
return "Test is working."
};
$scope.twitterUser = "AngularJS";
$scope.tweet;
$scope.profileImage;
$scope.searchTerm;
// Returns latest post on Twitter from AngularJS
$scope.getLatestAngularTwitterPost = function (callbackFunc) {
$scope.searchTerm = $scope.twitterUser;
var url = "http://api.twitter.com/1/users/show.json";
$http.jsonp(url, {
params: {
callback: 'JSON_CALLBACK',
screen_name: $scope.twitterUser
}
})
.success(function(data){
if(callbackFunc){
console.log("Passing twitter results to callback: " + callbackFunc.name);
return callbackFunc(data);
}
$scope.tweet = data.status.text;
$scope.profileImage = data.profile_image_url;
})
.error(function() {
$scope.tweet = "<strong>Error: could not make JSONP request to Twitter.</strong>";
});
};
});
angular.module('myApp')
.controller('ChildCtrl', function ($scope) {
$scope.name = "child";
});
jQuery - script.js
// Ex. of how to call methods and update properties
// in Angular controllers, from jQuery
$(function () {
// Get Angular controller "ParentCtrl".
// Could also use $('#someSpan').scope(); to get "ParentCntl" scope
var $scopeParentCtrl = $('#parent').scope();
// Get Angular controller "ChildCtrl".
var $scopeChildCtrl = $('#child').scope();
// Update the "name" property in Angular controller "ParentCtrl"
$scopeParentCtrl.$apply(function(){
$scopeParentCtrl.name = "Joe";
console.log("Parent name changed to " + $scopeParentCtrl.name);
});
// Update the "name" property in Angular controller "ChildCtrl"
$scopeChildCtrl.$apply(function(){
$scopeChildCtrl.name = "Gavin";
console.log("Child name changed to "+ $scopeChildCtrl.name);
});
// Call the "testFunc" function in Angular conroller "ParentCtrl"
console.log($scopeParentCtrl.testFunc());
// Call the JSONP function in Angular controller "ParentCtrl"
$scopeParentCtrl.getLatestAngularTwitterPost(jsonpCallback);
});
function jsonpCallback(data) {
var $scopeParentCtrl = $('#parent').scope();
$scopeParentCtrl.tweet = data.status.text;
$scopeParentCtrl.profileImage = data.profile_image_url;
}
来源：https://stackoverflow.com/questions/16195199/create-a-jsonp-api-in-angularjs-consume-with-jquery