Seminar On Using RESTful APIs in AngularJS

Back to Seminar


Topic Name:
Using RESTful APIs in AngularJS

Jyotirmaya Dehury

Short Description:
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.

Business Transcription:

Todays topic is how we will use RESTful APIs in Angular JS web application. Agenda for this section is basic rest concept and the basic angular JS, concepts and how we can use RESTful APIs in Angular JS we will also discuss about ng resources along with some module and demo module.


So what is rest? Its nothing but just a concept which we are using while developing our web services here we used HTTP methods so REST concept is mainly focus on CRUD operation create, read, update and delete those four operations and it map the HTTP methods to the CRUD operations like create we are using post, for read it is get, for update it is put and delete it is delete method and the rest is resource oriented so we will cover what is resource and how it is resource oriented.


Usually in our normal APIs let say we create  something creat a new user then we are posting some data to the APIs and the APIs looks like some user/new like that and while reading fetching a data want to fetch a particular record, particular user data then we need to pass the ID to that URL a specific URL  and to update again the post method data is updated and in delete we are using GET methods and URL will something like user/delete userid we are passing as the GET parameter now for rest concept we need to match the HTTP methods to our CRUD operations.


So for create we are using POST and URL will Like something /user if the method is post then it will creat the APIs will try to create new records. Read means it’s the get  fix the record and URL will be user/ID or user/1 for update again the URL will be user/ID and it will be a put method.if it is put method then it will try to update a record.


Similarly for delete the method should be delete and URL looks like something user/user ID this is how the restfull URL works and for post and put create and update we need to pass the whole data in some format.


So  now the resources, what is resources in rest so if you can see this URL (look slide)similarly for put for update it will use URL something like user/1 and for delete the URL is same  for post is different but for get, put, delete the URL is same only the methods is different, based on the methods it will identify which operation need to be perform if we need to face the user or we need to get the user or we need to delete the user so the server use the HTTP methods to identify  which process need to be done.


So here the resource is the user the rest is always concentrated on the resources so here in this case the resource will be the user and now representation in rest the representation is a data representation.

The basic strcture how angular js work so in angular we have models it means the data the java script APIs which store data whatever response we get we store them in model and model can talk to a view which are the web pages the web interphase and based on the model data the view reflects automatically  and angular JavaScript also has routing.


So based on the URL it automatically calls a specific function and get data and refresh the view mainly routing is helpful for book marking some of the URL  this is basic structure how angular JavaScript works in a web applications. We need to cover some of the angular services it means java script object which we can create, there are inbuilt services here there is something business logic which we can re use in different places in our web applications.


There are some built in services like HTTP, anchor scroll, cache factory,compile,parse,locale these are angular services which are java script object and these are re usable component in angular JavaScript applications.


So angular JavaScript has many built in modules and ng resource is one of the module and ng resource has the service resource which is used for in the restfull web services then to call restfull services means get the data and post the data as well and for the installation only we need to include angular resource JavaScript  separate java script file which is not included in angular JavaScript its so separate we can include that.


So to create a resource object so we know what is the resource in restful APIs. So we can define the resource object of angular JavaScript something like this URL, the default parameter the actions and the options, so just the same tax. So here you can see colon the user ID the default parameter is user ID @id now it means what ever user objects if we post it will chek the ID properties of that object and pass it here in the URL  and we will chek that in our demo applications. Let say I will call this resource object user by passing user ID 123 then it will try to call URL like slash user slash 123.


This resourse service have few methods like get, save, query, remove delete. Get to get  the data and save to post the data save it in the server, query to get multiple records it will aspect an array response, remove and delete both are same both are used to put a delete methods to the server.


Lets go to a demo applications it’s a simple demo where I can creat books I can display the list of books I can modify any of the books and I can delete the books now lets check how the code look like so for the simplicity purpose I have added all the JavaScript on the same page no mbc architecture here.


So this is the basic HTML structure and if you go through angular it binds to the view  by this methods the jsva script variable and double curli bracet means it will try to rander that data in that area and I have included both angular JavaScript, angular mean and angular resources.


Now I have created a module my app and whenever you creat a specific module and if you want to the module active in a specific section of a web page you need to add this ng app and the module so I have put in the HTML tag so that my module will be active throughout this applications.


So if you see this code I have created module and injected ng resource module so that I will be use ng source and I need to create a controller as well name is main controller ctl let say, here also I need to inject resource service which is included in ng resource module and scope is also a another services which define the scope which will be active within that controller(look the slide).


This is the java script part where I have included an angular resource,to use ng resources in a module we need to injected ng resource then I need to creat a controller my app controller and this is the controller name here I need to inject this resource services which is available in ng resource module the scope is where I can define all my data which will be active controller main ctl.


So I need to create a resource in this application I need to view all my work, I want to add book ,edit book,and delete book so here the resource will be the book which I have define like this the URL book service, web APIs , books ID,and the default data will be the ID. whenever  the ID will be available while calling anyother operation then it will automatically form a ID value here and also I have defined the update method here which we will discuss latter since this update method is not available by default in this resource object the default will get, save, querry, remove there is no update so we need to define it so I have define this update methods and it will use put.


This slide shows you the book list it comes from data base APIs. Let me show you how we call this APIs, I have defined a function called list  it is a function which I have defined to fetch all the books then it calls a query function. Book is the resource which I have defined so just book.query it means it will automatically calls the get methods.


It fetches all books and it will try to fetch all the data and records to the user interphase if I want to fetch a specific book information I have added in click events of individual books so clicking any of the book it will fetch the book name and the author .(look into the slide)



Tags: AngularJS, REST, Angular-Resource, JS, Javascript, Web, Google, API, Restful, Angular.Js, SPA, Singlepageapp, Seminar

Featured Seminar

News & Updates

  • November 19

    20th Year Anniversary Celebration at Malaysia

  • March 19

    Ninth Edition: DDMIT Quiz

Let us Connect!

Awards and Achievements

Red Herringcolor DeloitteFast50 DB ZInnov1   Nascome  DB Stpi

This site uses cookies. We respect your privacy.copyright (c) Mindfire Solutions 2007-2018. Login