The awesomeness that is AngularJS - Part 2

 Oct 20, 2015

This blog will continue on from my previous blog post, here, we will create an application that uses actual data from a specified source. The source of our data will be “Spotify”, this will give me the ability to retrieve any artist information that I might want to use.

The goal of this application is to provide the user with a search field so that they can retrieve any information on the artist in question. We will be utilising the Web API that Spotify exposes to retrieve information, and this will be configured in the Angular Service that will be set up as well.

We will leave all the components that was previously created in place and just add additional files as we need them. Firstly we need to understand how to communicate to the source of where we are fetching the information from, this can be done by visiting the following link: https://developer.spotify.com/web-api/.

So my first action that I will take is to create an Angular JS Module to encapsulate all of the logic needed to perform the communication, follow the next few steps to create a new JavaScript file and to create a new module.

  1. Firstly add a new file to your existing project (Right click project ADD> JavaScript File)
  2. Name the file something appropriate such as “MusicApp
  3. Now create the new Angular Module inside this app

The result should now look like the following:

AngluarJS

Now we will create an Angular Service to do the actual retrieval of the data, this service will be called from our controller that we will create in a later stage. To use the Web API we need to form a REST request, the easiest way for me to do this is to create a service and use the $HTTP object in angular. The steps needed to implement an Angular JS Service is as follows:

  1. Create a service using the Angular factory method, you can use the service method if you want. The factory method is however the recommended way.

    a) On line 3 we give the service a name and pass in any dependencies that the service might use, such as the $http object to make web requests
    b) We then create an empty object to represent the service and to return it to the calling controller
AngluarJS

Once the service is created we need to add a function to the service to do the actual request for the data of interest:

  1. Within the service create a new function and pass in “artistname” as the argument to the function. (The user will search by artist name)
  2. Within the function use the $http object to form a request to the Web API

    a) Specify a URL that matches the Web API documentation
    b) Include the argument within the URL you just specified
    c) Make sure the pass in a method of “GET” as we are retrieving results

AngluarJS

The service alone doesn’t do much at the moment, to change that we will add a controller to make calls to the service. This controller will contain the needed method for the user to invoke when trying to search an artist. Perform the following steps to create the controller:

  1. After the factory method you specified earlier, create a new controller by using the controller function. I named mine “ArtistController”
  2. Inject both the ArtistService and $scope objects as dependencies
  3. Within the controller add a function to the scope object so that the user can call it.
    a) Create a property to save the artistname.
    b) This function has an argument of “artistname” and will call the method within the service using a “then” method.
    c) The “then” method has two callback methods, one for success and one for error.
    d) Within the success method, retrieve the information from the response to represent your artist. Once again the properties that are returned is in the Web API documentation
    e) Within the error method show an appropriate error message to the user.

AngluarJS

Once you have created the controller, the last thing remaining is to create a proper page to display the information as well as a search component. We will add a new HTML file to our application and call it “ArtistInfo”. Once the page is created we need to do the following:

  1. Reference angular and our “MusicApp” JavaScript files to use the functionality.
  2. Add bootstrap to the Project and references to the page, so that it is better to look at.

AngluarJS

Now create the elements on the page as you see fit. Some of these elements need some extra properties to showcase the values retrieved from Spotify. The following image is my end result HTML.

AngluarJS

Take note of the following element in regards to the previous image:

  1. Firstly we have an input element on line 18 that uses the “ng-model” directive to bind to a property called “artistname”.
  2. Next, we have a button element on line 19 that uses the “ng-click” directive to bind to a function in the controller called “getarts”.
  3. Lines 23 and 26 uses the “ng-if” directive to check if there is any results returned and then based on the outcome it will either show the header for results or a header for no results.
  4. Line 29 uses a directive called “ng-repeat” , this directive will loop through a collection of items and create the nested elements for each one of those items.
    a) We are retrieving multiple artists, so we want to show an item box for each artist.
    b) Each item is placed within the art object
    c) Within the ”ng-repeat” element we refer to the art object to access the properties of each artist. In my case I am showing an image, the artist name and the amount of followers.

Once you have this in place and you run the application you should see the following:

AngluarJS

Your result will vary depending on your styling. Finally when you search for an artist you should either see a header saying no results or you should see the artists appear.

AngluarJS

How do your Excel skills stack up?   

Test Now  

About the Author:

Auret Swanepoel  

As a recent addition to the New Horizons team, Auret is a highly skilled and qualified IT Technical trainer. He has been a Microsoft Certified Trainer (MCT) since 2008 and has since then, also become a Microsoft Certified Professional (MCP), a Microsoft Certified Technology Specialist (MCTS) and a Microsoft Certified Information Technology Professional (MCITP). With his international experience as a trainer in South Africa, Auret is able to adapt his teaching style to different audiences in the classroom and ensure that students are learning in a positive and collaborative environment.

Read full bio
top
Back to top