Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ismailbarkani/angular--elgrandetoto-track-albums
All ElGrandeTOTO's albums by connecting to Spotify Web API
https://github.com/ismailbarkani/angular--elgrandetoto-track-albums
angular angular-cli angular9 bootstrap javascript spotify-web-api
Last synced: 9 days ago
JSON representation
All ElGrandeTOTO's albums by connecting to Spotify Web API
- Host: GitHub
- URL: https://github.com/ismailbarkani/angular--elgrandetoto-track-albums
- Owner: IsmailBarkani
- Created: 2020-03-18T14:20:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T16:17:07.000Z (almost 2 years ago)
- Last Synced: 2023-03-07T04:51:35.869Z (over 1 year ago)
- Topics: angular, angular-cli, angular9, bootstrap, javascript, spotify-web-api
- Language: TypeScript
- Homepage:
- Size: 4.03 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ElGrandeToTo Album's Track
## Description
Creates a functional spotify search front end using entirelly Angular 9. Uses and connect to Spotify Rest API's for search and listing ElGrandeToTo's albums, and a page that shows selected albums details (see screenshots below). It is integrated with Spotify, so preview of albums and song can be played directly in Spotify (Or on the website). It uses routing mechanism in Angular for moving/showing on diferent views. As spotify API requires authentication is is necessary to register the application into Spotify Dev and then get an authorization token which is used in every API calls.
## ScreenShots
- Home Page
- Playslit
- View in Spotify
- Search for more Albums
- Example
## Getting Started
- Clone the repo
```git
$ git clone
```
- Install dependency
```shell
$ npm install
```
- Run the app
``` shell
$ ng serve --open
```
- Production build
```shell
$ ng build
```
- All of the functions in Spotify require you to authenticate your application.
```js
private access_token: string = 'authorization token'
```
#### Get an Album
Get Spotify catalog information for a single album.
```js
getAlbum(id:string){
let headers = new HttpHeaders().set('Authorization', 'Bearer ' + this.access_token);
this.albumUrl = 'https://api.spotify.com/v1/albums/'+id;
return this.httpClient.get(this.albumUrl, {headers: headers }).pipe(
map(res => res)
);
}
```
#### Get an Artists
Get Artist information.
```js
getArtist(id:string){
let headers = new HttpHeaders().set('Authorization', 'Bearer ' + this.access_token);
this.artistUrl = 'https://api.spotify.com/v1/artists/'+id;
return this.httpClient.get(this.artistUrl, {headers: headers });
}
```