You now should be to the point where you understand the bigger picture of the iTunes web app that has been show to you throughout the class (http://tylermcginnis.com/itunes). Tonight, you're going to recreate your own version of it which fetches Artists using the iTunes API.
The concepts this project will cover are
- $http
- Angular Services
- Passing a Service into your Controller
- Working with outside code (ng-grid)
##Step 1: Clone and Dissect the Repo
- Fork and clone this repository.
- Go and check out http://tylermcginnis.com/itunes. Although that example includes a bunch of filtering options, this project will just be fething data by artist name.
- Examine the codebase. Like the ChatRoom project, the index.html page is already built for you. Your main goal is to fill in mainCtrl.js and itunesService.js
- If you're feeling adventurous, feel free to change the CSS how you would like.
- Head over to http://angular-ui.github.io/ng-grid/ and check out the examples there. We will be using ng-grid to display the data we get from iTunes. Although all this code will already be in place for you, it's a good idea to get familiar with ng-grid so you know exactly what that code is doing.
##Step 2: Build your itunesService
- In Angular we use 'services' to outsource some of our heavy lifting. That's exactly what we're going to do when we call the iTunes API.
- Open up itunesService.js and read the instructions. The bigger picture is that this service is going to havea method which takes in an artist name as the parameter, then uses a JSONP http request to call the iTunes API and retrieve the data about that specific artist.
##Step 3: Tie in your Controller
- Now that your itunesService is finished, we somehow need a way to tie the data we're getting from itunesService to our view (index.html)
- Go to mainCtrl.js and follow the instructions in order to get the itunes data from your service to your view
##Step 4: Add More Options
- Go back and look at the original data you're getting from iTunes. There is a lot more that you can play around with...
- Add more columns to ng-grid so the user can see more options
- Add a filtering option so they can filter by price, name, etc etc.
- Also add a options dropdown so they can select which type of data they want from iTunes. Artist, song, movie, etc.(In other words, make it exactly like tylermcginnis.com/itunes)