在AngularJS中创建一个JSONP API并使用jQuery

现在我用JQuery创建了一个JS API，但我想知道是否可以用AngularJs完成。

例如，想象一下如下的小API：

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"); } } } 

我一直在搜索AngularJs文档并在Google中搜索，但我还没有找到一种方法可以在AngularJS中创建Jquery中的代码。 我想也许可以使用$ routeProvider它可以完成，但我没有找到任何关于如何使用$ routeProvider进行jsonp调用而不显示模板或重定向到某个地方的示例或文档。

Answer 1

听起来你需要的是一种服务，类似于这里所做的：

建议从服务器获取数据的方法

http://jsfiddle.net/wpPhY/

但是包含$resource ：

http://docs.angularjs.org/api/ngResource.$resource

以下是查询Twitter的JSONP服务的基本示例（取自http://egghead.io ）：

JSFiddle演示： 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}); }; }]); 

此外，值得一看的是使用Breeze和Angular。 我自己没有用它，但你可以用它创建一些非常酷的CRUD应用程序：

http://www.breezejs.com/samples/todo-angular

但是，如果您希望从jQuery获取对特定Angular控制器（或范围）内定义的函数或属性的访问权限，请查看下面的Plnkr和代码。

说实话，如果可能的话，我真的不会走这条路。 最好从解决方案中删除jQuery并坚持使用Angular。 意思是编写Angular API或服务并使用Angular控制器/指令等来使用它。

换句话说，如果您要在应用程序中使用Angular，那么请选择“所有Angular”。 不要试图与jQuery混合搭配。 它只会减慢你的速度，让你的代码更难维护。

完整的Plnkr演示： http ：//plnkr.co/edit/X5SfKD？p = preview

HTML

           
 This is {{name}}. 
This is {{name}}.
 Get latest tweet for:  Get Tweet

 Latest {{searchTerm}} Twitter post: 
   
 
   

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 = "Error: could not make JSONP request to Twitter."; }); }; }); 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; }