spotify service

make search track on spotify

by Anton Repjov

HTML

<div ng-controller="mainCtrl">
 
    <input ng-model="track" placeholder="Type track name here"><button ng-click="search()">Search</button>
<ul>
    <li ng-repeat="song in songs">[{{song.artists[0].name}}] <a href="{{song.href | playSongHref}}">{{song.name}}</a></li>
</ul>
</div>

JavaScript

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

app.controller('mainCtrl', ['$scope', 'spotifySearch', function($scope, spotifySearch) {
    $scope.track = "";
    $scope.songs = [];
    $scope.search = function(){
        spotifySearch.search($scope.track).then(function(res){
            console.log('>>>>>>', res.data);
            if(res.data.info.num_results > 0) {
                $scope.songs = res.data.tracks;
            }
        });
    };
}]);

//Our filters
app.filter('playSongHref', function(){
    return function(link) {
        if(link) {
            return 'https://play.spotify.com/track/' +  link.replace('spotify:track:', '');
        } else {
            return link;
        }
    }
});

//Our service
app.value('spotifyAPI', {
    'search': 'https://api.spotify.com/v1/search', //here we can use params :type=track and will get more detials info about track see console.log
    'track': 'http://ws.spotify.com/search/1/track.json'
})
app.service('spotifySearch', ['$http', 'spotifyAPI', function($http, spotifyAPI) {
    var api= {};
    api.search = function(text){
        return $http.get(spotifyAPI.track, {params:{q:text}})
    };
    return api;
}]);