Seminar On Using RESTful APIs in AngularJS
Using RESTful APIs in AngularJS
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.
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.
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)