// Code goes here
(function () {
var app = angular.module("weasel");
var SearchController = function($scope, $http,$location, spotify, artistService){
$scope.message = "Search The Weasel to find an Artist or a Band";
var artistsFound = function (data) {
artistService.name = data.artists.items;
$location.path("/Artist/");
};
var onError = function () {
$scope.Artistmessage = "No artist found";
};
$scope.search = function(){
spotify.getArtists($scope.artist).then(artistsFound, onError);
};
$scope.Artistmessage = "";
$scope.artist = "bloc party";
};
app.controller("SearchController",SearchController);
}());
/* Styles go here */
.Highlight
{
background-color:#F0FFFF;
cursor:pointer;
}
.cover {
width: 300px;
height: 300px;
display: inline-block;
background-size: cover;
}
.cover:hover {
cursor: pointer;
}
.urlbar {
border:solid 1px black;
margin:20px 5px 20px 5px;
}
(function() {
var app = angular.module("weasel", ["ngRoute"])
app.config(function($routeProvider) { // can put our routing code in here routeProvidcer made availbale through ngRoute dependency
$routeProvider
.when("/Artist",{
templateUrl: "Artist.html" ,
controller: "ArtistController"
})
.when("/:Artist/:id",{
templateUrl:"Albums.html",
controller:"AlbumsController"
})
.when("/Artist/Album/:songid",{
templateUrl: "Songs.html",
controller:"SongsController"
})
.otherwise({redirectTo:"/index"});
});
}());
(function() {
var app = angular.module("weasel");
var ArtistController = function($scope, $http, $location, spotify, artistService) {
$scope.getAlbum = function(id, artist) {
$location.path("/" + artist + "/" + id);
};
$scope.artistsReturned = artistService.name;
};
app.controller("ArtistController", ArtistController);
}());
(function() {
var app = angular.module("weasel");
app.controller("AlbumsController", function($scope,spotify,$routeParams, $location){
var albumsFound = function(data) {
$scope.albumMessage = "Albums found";
$scope.albumsReturned = data.items;
};
var onError = function() {
$scope.albumMessage = "No albumFound";
};
$scope.chosenArtist = $routeParams.Artist;
spotify.getAlbums($routeParams.id).then(albumsFound, onError);
$scope.songs = function(id){
$location.path("/Artist/Album/" + id);
};
});
}());
<div class="panel panel-default">
<div class="panel-body">
<h1>{{chosenArtist}} Albums </h1>
</div>
</div>
<div class="col-sm-4" ng-repeat="albums in albumsReturned">
<div class="row">
<div >
<b>{{albums.name}}</b>
<br>
<img ng-show=" {{albums.images[0].url}}" ng-src=" {{albums.images[0].url}}" class="cover list-group-item" ng-click="songs(albums.id)">
</div>
</div>
</div>
<script id="results-template" type="text/x-handlebars-template">
{{#each albums.items}}
<div style="background-image:url({{images.0.url}})" data-album-id="{{id}}" class="cover"></div>
{{/each}}
</script>
<a href="#/index">Clear the results</a>
<div>
<ul class="list-group">
<li class="list-group-item" ng-click="getAlbum(artist.id,artist.name)" ng-class="{Highlight: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" ng-repeat="artist in artistsReturned">
<br>
<div class="panel panel-default">
<div class="panel-heading">
<b> {{artist.name}} </b>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-sm-5">
<center><img ng-show="{{artist.images[0].url}}" ng-src="{{artist.images[0].url}}" height="300" width ="300"/></center>
<br>
</div>
<div class="col-sm-7">
<div class="well">
<dl class="dl-horizontal">
<dt ng-show="artist.genres[0]">Genres:</dt>
<dd ng-show="artist.genres">{{artist.genres[0]}}</dd>
<dt ng-show="artist.followers">Followers:</dt>
<dd ng-show="artist.followers">{{artist.followers.total | number}}</dd>
<dt ng-show="artist.popularity">Popularity:</dt>
<dd ng-show="artist.popularity">
{{artist.popularity}}/100
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><a>View Albums</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a href="#/index">Clear the results</a>
<!DOCTYPE html>
<html ng-app="weasel">
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="angular-route@1.4.6" data-semver="1.4.6" src="https://code.angularjs.org/1.4.6/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="router.js"></script>
<script src="SpotifyService.js"></script>
<script src="ArtistService.js"></script>
<script src="SearchController.js"></script>
<script src="ArtistController.js"></script>
<script src="AlbumsController.js"></script>
<script src="SongsController.js"></script>
<script src="urlbarController.js"></script>
</head>
<body>
<div class='urlbar' ng-controller='urlbarController'>{{url()}}</div>
<div ng-controller="SearchController" >
<div class="panel -default">
<img src="http://img1.wikia.nocookie.net/__cb20140204154543/cow-and-chicken/images/5/50/I.M._Weasel.png" style="width:100px;height:100px;">
{{message}}
</div>
<form class="navbar-form" role="search" name="searchUser" ng-submit="search(artist)">
<div class="input-group">
<input type="search" class="form-control" required="" placeholder="Search for an Artist" ng-model="artist" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div ng-view=""></div>
</body>
</html>
(function(){
var spotify = function($http){
var getArtists = function(artist){
return $http.get("https://api.spotify.com/v1/search?q=" + artist + "&type=artist")
.then(function(response){ return response.data });
};
var getAlbums = function(id){
return $http.get("https://api.spotify.com/v1/artists/" + id + "/albums?market=GB")
.then(function(response){ return response.data });
};
var getSongs = function(id){
return $http.get("https://api.spotify.com/v1/albums/" + id)
.then(function(response){return response.data});
};
var playSongs = function(id){
return $http.get("https://api.spotify.com/v1/tracks/" + id)
.then(function(response){return response.data});
};
var pauseSongs = function(id){
return $http.get("https://api.spotify.com/v1/tracks/" + id)
.then(function(response){return response.data});
};
return{
getArtists:getArtists,
getAlbums:getAlbums,
getSongs:getSongs,
playSongs:playSongs,
pauseSongs:pauseSongs
};
};
var module = angular.module("weasel");
module.factory("spotify", spotify);
}());
(function(module) {
var artistService = function() {
return {
name: undefined
};
};
module.factory("artistService", artistService);
}(angular.module("weasel")));
(function() {
var app = angular.module("weasel");
var SongsController = function($scope, spotify, $routeParams, $http) {
var songsFound = function(data) {
$scope.songsReturned = data.tracks.items;
};
var onError = function() {
alert("no songs");
};
var songsPlaid = function(data) {
$scope.playing;
$scope.paused;
data.preview_url;
$scope.audio = document.createElement('audio');
$scope.audio.src = data.preview_url;
$scope.audio.play();
};
var songsPaused = function(data){
$scope.audio.pause();
};
$scope.playSong = function(id) {
spotify.playSongs(id).then(songsPlaid, onError);
};
$scope.pauseSong = function(id) {
spotify.pauseSongs(id).then(songsPaused, onError);
};
spotify.getSongs($routeParams.songid).then(songsFound, onError);
};
app.controller("SongsController", SongsController);
}());
<div class="panel panel-default">
<div class="panel-body">
<h1>Songs</h1>
</div>
</div>
<div>
<ul >
<li id="music-button" ng-class="{Highlight: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="list-group-item" ng-repeat="songs in songsReturned">
{{songs.name}} <button class="btn btn-link" ng-click="playSong(songs.id)">Play</button> <button class="btn btn-link" ng-click="pauseSong(songs.id)">Pause</button>
</li>
</ul>
</div>
(function() {
var urlbarController = function($scope, $location) {
$scope.url = function() { return $location.url(); }
}
angular.module('weasel').controller('urlbarController', urlbarController);
})();