Using RESTFUL APIs in ANGULARJS

3,062 views

Published on

SPA(Single-page application) web-solutions are now a days the new standard of web development, becoming more and more popular and narrowing down the difference between a desktop and web application. JavaScript libraries/frameworks like Backbone, Knockout, Angular along with RESTful web APIs provide a great platform to develop SPA web-solutions.

Published in: Software

Using RESTFUL APIs in ANGULARJS

  1. 1. Using RESTful APIs in AngularJS Presenter: Jyotirmaya Dehury, Mindfire Solutions Date: 07/30/2014
  2. 2. 1. REST Concepts. 2. CRUD(create, read, update, and delete) with REST. 3. Basics of AngularJS 4. Consuming RESTful APIs using ngResource module in AngularJS. 5. Demo App. Agenda Presenter: Jyotirmaya Dehury, Mindfire Solutions
  3. 3. REST Concepts REST is a standard to be followed. Helps you to build an API that is efficient, easy to use and HIGHLY UNDERSTANDABLE. RESOURCE-oriented model to expose their services. Create a uniform interface by mapping HTTP methods to CRUD CRUD = Create, Read, Update, Delete HTTP methods = POST, GET, PUT, DELETE Create = POST Read = GET Update = PUT Delete = DELETE Presenter: Jyotirmaya Dehury, Mindfire Solutions
  4. 4. REST Concepts So instead of API calls such as: Create – POST: /user/new Read – GET: /user?id=1 Update – POST: /user/update Delete – GET: /user/delete?id=1 Simply: Create – POST: /user (with the variables in the entity-body) Read – GET: /user/1 Update – PUT: /user/1 (with the variables in the entity-body) Delete – DELETE: /user/1 Presenter: Jyotirmaya Dehury, Mindfire Solutions
  5. 5. REST Concepts Consider the following: POST: http:/test.com/user GET: http:/test.com/user/1 PUT: http:/test.com/user/1 DELETE: http:/test.com/user/1 POST, GET, PUT, DELETE are the methods http:/test.com/user, http:/test.com/user/1 are URI’s user/1 is a user, which is a resource Understand Resources and REST URI Presenter: Jyotirmaya Dehury, Mindfire Solutions
  6. 6. REST Concepts Difference between a resource and a representation: GET: http:/test.com/user/1 will return a Representation {"firstName":"John", "lastName":"Doe"} Of the resource user:1. A representation will have a format like JSON or XML. A client application gets a REPRESENTATION of the resource using the REST URI Presenter: Jyotirmaya Dehury, Mindfire Solutions
  7. 7. AngularJS A great framework to develop SPA web-solutions. An MVC framework. A JavaScript framework to develop web applications. Presenter: Jyotirmaya Dehury, Mindfire Solutions
  8. 8. AngularJS Angular Features Presenter: Jyotirmaya Dehury, Mindfire Solutions Server APIs
  9. 9. AngularJS Its a JavaScript object. Angular services help to build reusable business logic which can be shared and used across the app. Angular Services $http $resource $q $anchorScroll $cacheFactory $compile $parse $locale $timeout $exceptionHandler $filter $cookieStore $route $routeParams $location ● Built-In Services Presenter: Jyotirmaya Dehury, Mindfire Solutions● Custom Services
  10. 10. AngularJS The ngResource module provides interaction support with RESTful services via the $resource service. ngResource Installation <script src=”angular.js”> <script src=”angular-resource.js”> Presenter: Jyotirmaya Dehury, Mindfire Solutions
  11. 11. AngularJS Creates a resource object that lets you interact with RESTful server-side data sources. $resource $resource(url, [paramDefaults], [actions], options); var User = $resource('/user/:userId', {userId:'@id'}); var user = User.get({userId:123}); // GET: /user/123 Presenter: Jyotirmaya Dehury, Mindfire Solutions
  12. 12. AngularJS Creates a resource object that lets you interact with RESTful server-side data sources. $resource $resource(url, [paramDefaults], [actions], options); { 'get' : {method: 'GET' }, 'save' : {method: 'POST' }, 'query' : {method: 'GET' , isArray:true}, 'remove' : {method: 'DELETE' }, 'delete' : {method: 'DELETE' } }; Presenter: Jyotirmaya Dehury, Mindfire Solutions
  13. 13. Demo Presenter: Jyotirmaya Dehury, Mindfire Solutions
  14. 14. Questions? Presenter: Jyotirmaya Dehury, Mindfire Solutions
  15. 15. http://www.pluralsight.com/ https://docs.angularjs.org/api/ngResource/service/$resource http://mark-kirby.co.uk/2013/creating-a-true-rest-api/ IBM – RESTful Web Services: The Basics https://www.youtube.com/watch?v=QHIMygADPPc References Presenter: Jyotirmaya Dehury, Mindfire Solutions
  16. 16. Presenter: Jyotirmaya Dehury, Mindfire Solutions Thank you
  17. 17. www.mindfiresolutions.com https://www.facebook.com/MindfireSolutions http://www.linkedin.com/company/mindfire-solutions http://twitter.com/mindfires

×