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, treating each track as a resource. The 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', []);
    function RecentTracksController($scope, $http) {
        var url = '';
        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");

The HTML (simplified for brevity).

<!DOCTYPE html>
<html lang="en" ng-app="lastfm-app">
    <meta charset="utf-8">
    <title>Recent Tracks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap-responsive.min.css">
    <div class="container" ng-controller="RecentTracksController">
        <ul class="thumbnails">
            <li class="span4" ng-repeat="song in songs">
                <a class="thumbnail" href="{{song.url}}" title="{{song.artist['#text']}} - {{}}" style="display: block;">
                    <div class="media">
                        <div class="pull-left" href="#">
                            <img class="media-object" src="{{song.image[2]['#text']}}">
                        <div class="media-body">
                            <strong>{{song.artist['#text']}}</strong><br />
                            {{}}<br />
    <script src=""></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src=""></script>
    <script src="js/main.js"></script>

The resulting grid will look something like this:

Recent Tracks