Using RESTFUL APIs in ANGULARJS

Using RESTFUL APIs in ANGULARJS

• 1.
  Using RESTful APIsin AngularJS Presenter: Jyotirmaya Dehury, Mindfire Solutions Date: 07/30/2014
• 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.
  REST Concepts REST isa 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.
  REST Concepts So insteadof 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.
  REST Concepts Consider thefollowing: 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.
  REST Concepts Difference betweena 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.
  AngularJS A great frameworkto develop SPA web-solutions. An MVC framework. A JavaScript framework to develop web applications. Presenter: Jyotirmaya Dehury, Mindfire Solutions
• 8.
  AngularJS Angular Features Presenter: JyotirmayaDehury, Mindfire Solutions Server APIs
• 9.
  AngularJS Its a JavaScriptobject. 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.
  AngularJS The ngResource moduleprovides 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.
  AngularJS Creates a resourceobject 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.
  AngularJS Creates a resourceobject 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.
  Demo Presenter: Jyotirmaya Dehury,Mindfire Solutions
• 14.
  Questions? Presenter: Jyotirmaya Dehury,Mindfire Solutions
• 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 – RESTfulWeb Services: The Basics https://www.youtube.com/watch?v=QHIMygADPPc References Presenter: Jyotirmaya Dehury, Mindfire Solutions
• 16.
  Presenter: Jyotirmaya Dehury,Mindfire Solutions Thank you
• 17.
  www.mindfiresolutions.com https://www.facebook.com/MindfireSolutions http://www.linkedin.com/company/mindfire-solutions http://twitter.com/mindfires