Last.fm Recent Tracks with AngularJS

AngularJS is an MVC framework for javascript. It is best suited for round-tripping resources with a RESTful service. In this post, I will simply get a list of recent tracks from Last.fm, treating each track as a resource. The Last.fm API is documented here. There is no round-tripping in this example. I’ll also be utilizing Twitter Bootstrap for layout.

To start, create the AngularJS application and a controller for recent tracks. Since this is a simple application, there are no routes and views. The controller will be invoked inline on the main page. Routes and views are easily added once you get a handle on the framework.

'use strict';

var LastFmApp = angular.module('lastfm-app', []);

LastFmApp.controller('RecentTracksController',
    function RecentTracksController($scope, $http) {
        var url = 'http://ws.audioscrobbler.com/2.0/';
        var params = {
            method: 'user.getrecenttracks',
            api_key: 'your_api_key',
            limit: 12,
            user: 'user_name',
            format: 'json'
        };
        $http.get(url, { params: params })
            .success(function (data) {
                $scope.songs = data.recenttracks.track;
            })
            .error(function (data, status) {
                console.log(data || "Request failed");
                console.log(status);
            });       
    });

The HTML (simplified for brevity).

    


  

    

      
                          
      
      

        

          
                                  
        
                                
        
        

          {{song.artist['#text']}}

                                      {{song.name}}

                                      {{song.date['#text']}}
                                  
        
                            
      
                      
                  
    
            
  
      

    
    
    
    

The resulting grid will look something like this: