jwood803
10/12/2013 - 11:48 PM

AngularJS for the Jamendo app snippets for the blog posts

AngularJS for the Jamendo app snippets for the blog posts

app2.js
content_copyfile_download
var jamendoApp = angular.module('jamendoApp', []);

// Used to enable CORS
jamendoApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
albumsService.js
content_copyfile_download
jamendoApp.service('albumsService', function($http) {
	var serviceBase = "http://api.jamendo.com/v3.0/";

	this.getAlbums = function(artist, callback) {
		$http.get(serviceBase + "albums/?client_id=b6747d04&format=jsonpretty&artist_name=" + artist)
      .success(callback)
      .error(function(x, status, error) {
         alert(error);
   	});
	}
});
JamendoAngularHtml2.html
content_copyfile_download
<!DOCTYPE HTML>
<html ng-app="jamendoApp">
<head>
  <title>Jamendo API with AngularJS</title>
  <link href="http://fonts.googleapis.com/css?family=Cantora+One" rel="stylesheet" type="text/css">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/grid.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
  <script src="controllers/AlbumController.js" type="text/javascript"></script>
  <script src="services/albumsService.js" type="text/javascript"></script>
</head>
  <body ng-controller="AlbumController">
    <div class="container">
      <h1>Jamendo Artist Search</h1>

      <input id="artist" type="text" placeholder="Enter artist name" ng-model="artist">
      <button ng-click="getAlbums()">Get Albums</button><br/><br/>
      <h2>Album Info</h2>
      <div id="albums" ng-repeat="album in albums">
        {{album.name}}<br/>
        <img ng-src="{{album.image}}">
      </div>
    </div>
  </body>
</html>
JamendoAngularHtml.html
content_copyfile_download
<html ng-app="jamendoApp">
<head>
  <title>Jamendo API with AngularJS</title>
  <link href="http://fonts.googleapis.com/css?family=Cantora+One" rel="stylesheet" type="text/css">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/grid.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
  <script src="controllers/Album.js" type="text/javascript"></script>
</head>
  <body ng-controller="Album">
    <div class="container">
      <h1>Jamendo Artist Search</h1>

      <input id="artist" type="text" placeholder="Artist name" ng-model="artist">
      <button ng-click="getAlbums()">Get Albums</button><br/><br/>
      <div>
        <h2>Album Info</h2>
        <div id="albums" ng-repeat="album in albums">
            {{album.name}}<br/>
            <img src="{{album.image}}">
        </div>
      </div>
    </div>
  </body>
</html>
App.js
content_copyfile_download
// Used for globals and Angular config settings such as routing.
var jamendoApp = angular.module('jamendoApp', []);

jamendoApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
AlbumsController2.js
content_copyfile_download
jamendoApp.controller('AlbumController', function($scope, $http, albumsService) {
    $scope.getAlbums = function() {
	    var artist = $scope.artist;

    	albumsService.getAlbums(artist, function(data) {
        if(data.headers.status == 'success') {
          $scope.albums = data.results;
        }
        else {
          alert("Error - " + data.headers.error_message);
        }
      });
    }
});
AlbumController.js
content_copyfile_download
jamendoApp.controller('Album', function($scope, $http) {
  $scope.getAlbums = function() {
    $http.get("http://api.jamendo.com/v3.0/albums/?client_id=b6747d04&format=jsonpretty&artist_name=" + $scope.artist)
         .success(function(data) {
            if(data.headers.status == 'success') {
              $scope.albums = data.results;
            }
            else {
              alert("Error - " + data.headers.error_message);
            }
         })
         .error(function(x, status, error) {
           alert(error);
         });
     };
});