Using RESTFUL APIs in ANGULARJS
Download as PPT, PDF9 likes4,392 views
The document presents a detailed overview of using RESTful APIs with AngularJS, emphasizing REST concepts, CRUD operations, and the use of the ngResource module. It covers how to build an efficient API and demonstrates AngularJS features and services for interacting with RESTful data sources. A demo and references to additional resources are also included.
![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](https://image.slidesharecdn.com/restfulapisinangularjs-140805033422-phpapp01/85/Using-RESTFUL-APIs-in-ANGULARJS-11-320.jpg)
![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](https://image.slidesharecdn.com/restfulapisinangularjs-140805033422-phpapp01/85/Using-RESTFUL-APIs-in-ANGULARJS-12-320.jpg)
Using RESTFUL APIs in ANGULARJS
- 1. Using RESTful APIs in 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 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. 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. 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. 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. 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. AngularJS Angular Features Presenter: Jyotirmaya Dehury, Mindfire Solutions Server APIs
- 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. 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. 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. 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. 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 – RESTful Web Services: The Basics https://www.youtube.com/watch?v=QHIMygADPPc References Presenter: Jyotirmaya Dehury, Mindfire Solutions
- 16. Presenter: Jyotirmaya Dehury, Mindfire Solutions Thank you