Create a JSONP API in AngularJS & consume with jQuery-Collection of common programming errors

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

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

Originally posted 2013-11-09 20:46:08.