Skip to content

kurtcorbett/itunes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

iTunes Angular Clone

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

  1. $http
  2. Angular Services
  3. Passing a Service into your Controller
  4. 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 have a 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 http://tylermcginnis.com/itunes)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published