Using JSONP With $resource In AngularJS

Datetime:2016-08-22 23:50:38          Topic: JSONP  AngularJS           Share
  • <!doctype html>
  • <html ng-app="Demo">
  • <head>
  • <meta charset="utf-8" />
  •  
  • <title>
  • Using JSONP With $resource In AngularJS
  • </title>
  •  
  • <style type="text/css">
  •  
  • a[ ng-click ] {
  • color: red ;
  • cursor: pointer ;
  • text-decoration: underline ;
  • }
  •  
  • </style>
  • </head>
  • <body ng-controller="DemoController">
  •  
  • <h1>
  • Using JSONP With $resource In AngularJS
  • </h1>
  •  
  • <p>
  • I have the most awesome friends!
  • </p>
  •  
  • <!-- Show when data is loading. -->
  • <p ng-if="isLoading">
  • <em>Loading data...</em>
  • </p>
  •  
  • <!-- Show when data has finished loading. -->
  • <div ng-if="! isLoading">
  •  
  • <ul>
  • <li ng-repeat="friend in friends">
  • {{ friend.name }}
  • </li>
  • </ul>
  •  
  • <p>
  • <a ng-click="refresh()">Refresh List</a>
  • </p>
  •  
  • </div>
  •  
  •  
  • <!-- Load scripts. -->
  • <script type="text/javascript" src="../jquery/jquery-2.1.0.min.js"></script>
  • <script type="text/javascript" src="../angular-1.2.16/angular.min.js"></script>
  • <script type="text/javascript" src="../angular-1.2.16/angular-resource.min.js"></script>
  • <script type="text/javascript">
  •  
  • // Define our AnuglarJS module.
  • var app = angular.module( "Demo", [ "ngResource" ] );
  •  
  •  
  • // -------------------------------------------------- //
  • // -------------------------------------------------- //
  •  
  •  
  • // I controll the demo.
  • app.controller(
  • "DemoController",
  • function( $scope, $resource ) {
  •  
  • // I determine if the page is currently in a loading state.
  • $scope.isLoading = false;
  •  
  • // I hold the list of friends to render.
  • $scope.friends = [];
  •  
  • // When defining the JSONP-oriented resource, you need to define the
  • // request such that it contains the string "JSON_CALLBACK". When you
  • // do this, AngularJS will replace said string on a per-request basis
  • // with a new and unique callback instance.
  • var resource = $resource(
  • "api.cfm",
  • {
  • callback: "JSON_CALLBACK"
  • },
  • {
  • getFriends: {
  • method: "JSONP",
  • isArray: true
  • }
  • }
  • );
  •  
  • // Get the list of friends.
  • loadRemoteData();
  •  
  •  
  • // ---
  • // PUBLIC METHODS.
  • // ---
  •  
  •  
  • // I re-request the data from the server (using JSONP).
  • $scope.refresh = function() {
  •  
  • loadRemoteData();
  •  
  • };
  •  
  •  
  • // ---
  • // PRIVATE METHODS.
  • // ---
  •  
  •  
  • // I load the remote data.
  • function loadRemoteData() {
  •  
  • $scope.isLoading = true;
  •  
  • resource.getFriends().$promise.then(
  • function( friends ) {
  •  
  • $scope.isLoading = false;
  • $scope.friends = friends;
  •  
  • },
  • function( error ) {
  •  
  • // If something goes wrong with a JSONP request in AngularJS,
  • // the status code is always reported as a "0". As such, it's
  • // a bit of black-box, programmatically speaking.
  • alert( "Something went wrong!" );
  •  
  • }
  • );
  •  
  • }
  •  
  • }
  • );
  •  
  • </script>
  •  
  • </body>
  • </html>




About List