$http service in AngularJS

As you'll may know, in my previous blog, I wrote about sending a HTTP request using AJAX (Asynchronous Javascript and XML). After writing it, I thought may I should play around it some more. So, I started writing it using AngularJS. For you all who does not have a clue what AngularJS is, it is an opensource javascript developed and maintained by Google to develop Single Page Applications (SPAs). It is based on the MVC (Model View Controller) architecture. I have started writing on AngularJS from the very beginning in my other blog. So if you guys are interested, please do drop by.

So back to where I should be. I used $http which is a service in AngularJS for reading from remote servers. It makes a request to the server and returns a response.

First I created a controller named 'contentController' within the angular module I used to define my angular application. The simply called the get method from the $http service to send my request to https://api.github.com/users. 'then' denotes the callback function upon a successful request. There I stored the received array of elements from the JSON string (response.data) into an attribute within $scope.

Then I used this controller in a div and used ngRepeat directive upon another div to repeat the required elements from the array to get the desired output. 

 

 Output

 

<<Nandun Bandara>>

HTTP GET Request in Javascript

Today we had our second lab session for Application Frameworks and I found this particular part of the labsheet interesting.

 

What we have to do is, to create a function that would call the GitHub API. The url https://api.github.com/users returns a JSON string. So first lets grab it using a simple HTTP request. I created the following class to send a HTTP request.

In it there's a method called get() which take two arguments, the URL and a callback function. Basically, what it does is , it creates a instance of XMLHttpRequest which we would use to send the request. It supports both synchronous and asynchronous communications. But synchronous communications block the execution of the code and creates negative user experience. Hence asynchronous communications should be preferred.

The onreadystatechange is an EventHandler that is called when the readyState attribute is changed. The readyState attribute returns the state in which the XMLHttpRequest client is in. A readyState of 4 denotes that the request is complete and a status of 200 can be either th request is currently loading or is complete. The callback function is used to decide upon what should be done using the response text once it is received.

The open() method is used to initialize the request. It takes three arguments namely the method of request (GET/POST/PUT/DELETE...etc), the URL and 'async' which decides whether it is synchronous or asynchronous communication to be used which is optional. Here we use asynchronous communication, hence the async is set to true.

The send() method is used to send the request. If the request is asynchronous, this method would return as soon as the request is sent. But if it is synchronous, it would not return until the response has been received.

Now that we have the class, lets send the request.

 

First I created an instance from the class HttpClient (The one I created). Then I passed the URL to the get method call plus defined the callback function in which the response data which is JSON string would be manipulated.

Now to the callback function. We know that the response contains a JSON string. But in order to use the data in it, we first need to convert this into a JSON object. To do so, I used the parse method in JSON. Now that we have an array of data waiting for us, we'll display some of the content.

I used a <div> tag to display it. Got reference to the tag using an id and set the innerHTML to show the login and the type of each user record.

Output:

 

Git: https://gist.github.com/ntbandara3/5fc7863af226f7cff1fb9f6e6e5c3b51

<<Nandun Bandara>>

Information Technology Project >> ITP??

Being a SLIIT student you have to complete a many projects during your time of 3 or 4 years there. But to all there are some projects that every IT student must do. And the Information Technology Project or ITP the way everyone knows, is one of them. You get this during the second semester of your second year at SLIIT.

What is ITP?

Basically, in ITP you are meant to develop a software. It can be either a desktop application or a web application. But this time you have to have a real client. In the sense, your software must be a solution to an existing problem in the real world. Most of the time, it can be a ERP (Enterprise Resource Planning) system for some organization. Also note that, this project has to be done by a group of 8 members.

Finding the right client

Your client can vary from a small store in your town to a branched network of companies in the city. But its you who should consider whether it is the right project for you. For you get only one semester to complete the project and there are eight members in your group, it should not be either too big or too small. Try to find a client as quickly as possible for it is not an easy task.

Finding the right team

As this is group project, contribution from each and every member is a MUST! For you have another 4 subjects to go through, I don't think having goof-offs in your team would do any good. Just build a team of people with whom you are comfortable working with. Know their skills. You will need people with good writing skills for the documentation (A lot of it and I mean it), developing skills to develop the system and good communicating skills for the presentations. And also keep in mind, you guys are going to spend some very long nights. :D

Going through the project

Once you have found a client and a good team by your side, you are ready to go. Plan early. Make your own time line. Know your milestones. Your lecturer and your supervisor will make you aware of them. You will have to three document submissions and three presentations on your way. So be on alert and work hard.

Once this semester start, there will be no playtime. You have this project to work with and the workload from four other subjects as well. But chill, we survived. So why can't you? Love what you do, relax yourself, sit and work.

Good luck with this semester and feel free to ask anything. :) Happy Coding. :)

Adiós.
<<Nandun Bandara>>