AngularJS - $http & $resource Services

  • 11,259 views
Uploaded on

AngularJS - $http & $resource Services

AngularJS - $http & $resource Services

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,259
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
143
Comments
0
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Constructor Instance
  • 2. $http({ method: 'GET', url: '/someUrl' }) .success(function (data, status, headers, config) { // this callback will be called asynchronously // when the response is available }) .error(function (data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });
  • 3. $http.get('/someUrl').success( successCallback ); $http.post('/someUrl', data).success( successCallback );
  • 4. angular.module('MyApp', []). config(function ($httpProvider) { // Remove the default AngularJS X-Request-With header delete $httpProvider.defaults.headers.common['X-Requested-With']; // Set DO NOT TRACK for all Get requests $httpProvider.defaults.headers.get['DNT'] = '1'; }); $http.get('api/user', { // Set the Authorization header. In an actual app, you would // get the auth token from a service. headers: {'Authorization': 'Basic Qzsda231231'}, params: {id: 5} }).success(function() { // Handle success });
  • 5. function (d) { return isObject(d) && !isFile(d) ? toJson(d) : d; } function (data) { if (isString(data)) { // strip json vulnerability protection prefix data = data.replace(PROTECTION_PREFIX, ''); if (JSON_START.test(data) && JSON_END.test(data)) data = fromJson(data); } return data; }
  • 6. // register the interceptor as a service $provide.factory('myHttpInterceptor', function ($q, dependency1, dependency2) { return function (promise) { return promise.then(function (response) { // do something on success return response; }, function (response) { // do something on error if (canRecover(response)) { return responseOrNewPromise } return $q.reject(response); }); } }); $httpProvider.responseInterceptors.push('myHttpInterceptor'); // register the interceptor via an anonymous factory $httpProvider.responseInterceptors.push(function ($q, dependency1, dependency2) { return function (promise) { // same as above } });
  • 7. $http.get('http://server/myapi', { cache: true }).success(function() { // Handle success });
  • 8. $http({ method: string, url : string, params: object, data : string or object, headers: object, // or an array of functions. transformRequest: function transform(data, headersGetter), // or an array of functions. transformResponse: function transform(data, headersGetter), cache: boolean //or Cache object, timeout: number, withCredentials: boolean });
  • 9. $resource( url [, paramDefaults] [, actions] );
  • 10. Resource Constructor Resource Factory var User = $resource('/user/:userId', { userId: '@id' }); var user = User.get({ userId: 123 }, function () { user.abc = true; Resource Instance user.$save(); }); Prototype method Success callback
  • 11.     action – {string} – The name of action. Method – GET,POST,DELETE & JSONP Params - Optional set of pre-bound parameters for this action. isArray - bool
  • 12. Constructor Resource Constructor { 'get' : 'save' : 'query' : 'remove': 'delete': {method:'GET' }, {method:'POST'}, {method:'GET', isArray:true}, {method:'DELETE'}, {method:'DELETE'} }; Resource Constructor var User = $resource('/user/:userId'); Resource Factory
  • 13. User.get ( paramsObj, successFn, errorFn ); User.query ( paramsObj, successFn, errorFn ); // With Data Object User.save (paramsObj, dataObj, successFn, errorFn ); User.remove(paramsObj, dataObj, successFn, errorFn ); User.delete(paramsObj, dataObj, successFn, errorFn );
  • 14. var promise = $http(httpConfig) .then(function function .then(function function value.$promise = promise; value.$resolved = false; return value; The request details success(response) { }, error(respones) { }) responseInterceptor(response) { }, responseErrorInterceptor(response) { }); Resource Instance
  • 15. Instance Structure var card = Card.get( function () { card.name = "value"; card.$save(); });
  • 16. Instance vs. Constructor var User = $resource('/user/:userId', { userId: '@id' }); var user = User.get({ userId: 123); user.$delete(); Users.delete( {} , user); user.$remove() Users.remove( {} , user ) user.$save(); Users.save( user );
  • 17. eyalvardi.wordpress.com