angular $resource example

by manoj_antony32

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.14/angular-resource.min.js"></script>
<div ng-controller="myController as ctrl">
  <div ng-show="ctrl.result.$resolved">{{ ctrl.result.txt }}</div>
  <div ng-show="!ctrl.result.$resolved">waiting...</div>
</div>

JavaScript

var mainModule = angular.module('mainModule', ['ngResource']);

mainModule.config(['$resourceProvider', function($resourceProvider) {
  // Don't strip trailing slashes from calculated URLs
  $resourceProvider.defaults.stripTrailingSlashes = false;
}]);

// echo service
mainModule.factory('myService', function($resource) {
  return $resource("/echo/json/?", {}, {
    echo: {
      method: 'POST',
      isArray: false,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }
  });
});

// controller
mainModule.controller('myController', function(myService) {

  // this.result is assigned synchronously 
  this.result = myService.echo({
    delay: 1
  }, 'json=' + JSON.stringify({
    "txt": "HelloWorld"
  }));

});

angular.bootstrap(document, ['mainModule']);