在 AngularJS 中创建 JSONP API 并使用 jQuery 进行使用

2023-12-25

现在我已经使用 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 调用而不显示模板或重定向到某个地方的示例或文档。


听起来您需要的是一项服务,类似于这里所做的事情:

从服务器获取数据的推荐方式 https://stackoverflow.com/questions/11850025/recommended-way-of-getting-data-from-the-server/11850027#11850027

http://jsfiddle.net/wpPhY/ http://jsfiddle.net/wpPhY/

但随着包括$resource:

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

下面是一个用于查询 Twitter 的 JSONP 服务的基本示例(摘自http://egghead.io http://egghead.io):

JSFiddle 演示: http://jsfiddle.net/gavinfoley/DJ6da/ 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 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 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 应用程序 - 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 AngularJS 中创建 JSONP API 并使用 jQuery 进行使用 的相关文章

  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分
  • 如何取消 AjaxForm 上的提交

    我正在使用 jQuery 插件 ajax 形式 我尝试实现这样的东西 MyFormID ajaxForm dataType json resetForm true beforeSubmit function validateData ret
  • jQuery Find() 和 XML 在 IE 中不起作用

    我正在尝试使用 jQuery 来解析内存中的 XML 文档 除了 IE 之外 这在所有东西上都很有效 令人震惊 一些谷歌搜索显示 问题很可能是由于 IE 将我的文档视为 HTML 而不是 XML MIME 类型 有没有办法让我的 jQuer
  • Ajax 没有将我重定向到下一页

    我正在尝试将单击的图像的 ID 传递到下一页 当我开发代码时 它没有将我重定向到下一页 当我单击 F12 并检查网络中的 POST 时 它显示变量已正确传递到下一页 如附图所示 但它没有将我重定向到下一页 所以现在我知道变量在下一页中正确传
  • ng-model 中的传递函数

    例如 是否可以将函数传递到 ng model 中
  • jQuery:如果使用 html() 从 DOM 中删除事件处理程序,是否会从对象中删除事件处理程序

    我担心应用程序中的内存泄漏 因为我经常使用 jquery 的 html 方法来替换 DOM 中的内容 我只是想确保这些事件侦听器不会停留在浏览器内存中 我搜索了 jquery 文档没有明确的答案 有人知道吗 多谢你们 是的 他们是 如果你使
  • 锚标记的 onclick 未在 jsfiddle 中执行简单的 jQuery 函数

    我正在关注在线 jQuery 教程 但无法让此标记在 jsfiddle 中工作 div style padding 50px background color 89BC38 text align center display none b
  • 下划线反跳与参数

    假设我有这个事件处理程序 var mousewheel function e blah 但是 我想消除它 所以我这样做 它按预期工作 var mousewheelDebounced debounce mousewheel 500 docum
  • RegisterForEventValidation 只能在 Render 期间调用

    我有一个将从 jquery ajax 调用的 webmethod WebMethod public string TestMethod string param1 string param2 StringBuilder b new Stri
  • 仅当表单已提交时才触发 jQuery 表单验证?

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交
  • 如何重新加载 jquery dropkick 对象

    我使用一个简单的选择列表和 jquery dropkick 库来使其美观 现在我想在更改相应的选择元素后更改 dropkick 内容 出现了一个新选项 但只需调用 select dropkick 不起作用 而且好像不支持 只需从头开始重建那
  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge
  • jQuery 选择 # id 以单词为前缀,计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i
  • 如何像在 jQuery 中一样在 AngularJS 中触发事件?

    是否可以做类似的事情 container trigger click 仅使用 AngularJS 如果不可能trigger 还有其他方法来管理这种行为吗 我有一个基本示例 可以在单击按钮时创建一个框 创建的框是可拖动的 现在 用户必须单击按
  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素?

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有
  • JQuery 验证在 IE8 中不起作用

    我使用 JQuery 验证脚本来验证 HTML 表单 这在 Firefox 中完美运行 但在 IE8 中不起作用 我认为冒号 或分号 有问题 但我无法抓住它 jQuery validator addMethod selectNone fun
  • 如何通过jquery更改元素的类名

    div class bestAnswerControl div class IsBestAnswer div div 我想补充一下 bestanswer some attribute 我想更换class IsBestAnswer div 到
  • :jQuery / Sizzle 中的 nth-of-type()?

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch

随机推荐