From de242382a7ae7877307a6a7ac19f8d66e1426e61 Mon Sep 17 00:00:00 2001 From: stickyPiston Date: Sat, 21 Sep 2019 15:44:03 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Added=20more=20components.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit And even a working get request to the API. --- src/app/app-routing.module.ts | 11 +++++++- src/app/app.component.html | 22 +++------------- src/app/app.module.ts | 6 ++++- .../controls/controls.component.html | 1 + .../controls/controls.component.scss | 0 .../controls/controls.component.spec.ts | 25 +++++++++++++++++++ .../components/controls/controls.component.ts | 15 +++++++++++ src/app/components/home/home.component.html | 2 +- src/app/components/home/home.component.ts | 8 +++++- src/app/components/nav/nav.component.html | 1 + src/app/components/nav/nav.component.scss | 0 src/app/components/nav/nav.component.spec.ts | 25 +++++++++++++++++++ src/app/components/nav/nav.component.ts | 15 +++++++++++ 13 files changed, 108 insertions(+), 23 deletions(-) create mode 100644 src/app/components/controls/controls.component.html create mode 100644 src/app/components/controls/controls.component.scss create mode 100644 src/app/components/controls/controls.component.spec.ts create mode 100644 src/app/components/controls/controls.component.ts create mode 100644 src/app/components/nav/nav.component.html create mode 100644 src/app/components/nav/nav.component.scss create mode 100644 src/app/components/nav/nav.component.spec.ts create mode 100644 src/app/components/nav/nav.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d425c6f..2b4ee75 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,16 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { HomeComponent } from './components/home/home.component'; +import { ArtistsComponent } from './components/artists/artists.component'; +import { AlbumsComponent } from './components/albums/albums.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'artists/:id', component: ArtistsComponent }, + { path: 'artists/', component: ArtistsComponent }, + { path: 'albums/:id', component: AlbumsComponent }, + { path: 'albums/', component: AlbumsComponent } +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f3d9d8..f0355cc 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,21 +1,5 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- + + + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index eb5544b..4fc6d0b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,8 @@ import { HomeComponent } from './components/home/home.component'; import { SongComponent } from './components/song/song.component'; import { ArtistsComponent } from './components/artists/artists.component'; import { AlbumsComponent } from './components/albums/albums.component'; +import { NavComponent } from './components/nav/nav.component'; +import { ControlsComponent } from './components/controls/controls.component'; @NgModule({ declarations: [ @@ -16,7 +18,9 @@ import { AlbumsComponent } from './components/albums/albums.component'; HomeComponent, SongComponent, ArtistsComponent, - AlbumsComponent + AlbumsComponent, + NavComponent, + ControlsComponent ], imports: [ BrowserModule, diff --git a/src/app/components/controls/controls.component.html b/src/app/components/controls/controls.component.html new file mode 100644 index 0000000..5aa68c2 --- /dev/null +++ b/src/app/components/controls/controls.component.html @@ -0,0 +1 @@ +

controls works!

diff --git a/src/app/components/controls/controls.component.scss b/src/app/components/controls/controls.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/controls/controls.component.spec.ts b/src/app/components/controls/controls.component.spec.ts new file mode 100644 index 0000000..f66ed2c --- /dev/null +++ b/src/app/components/controls/controls.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ControlsComponent } from './controls.component'; + +describe('ControlsComponent', () => { + let component: ControlsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ControlsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ControlsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/controls/controls.component.ts b/src/app/components/controls/controls.component.ts new file mode 100644 index 0000000..84173c8 --- /dev/null +++ b/src/app/components/controls/controls.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-controls', + templateUrl: './controls.component.html', + styleUrls: ['./controls.component.scss'] +}) +export class ControlsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 5f2c53f..4122c38 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1 +1 @@ -

home works!

+

{{ (song | async) | json }}

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index f56c8c1..60961aa 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { DataService } from 'src/app/services/data.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-home', @@ -7,9 +9,13 @@ import { Component, OnInit } from '@angular/core'; }) export class HomeComponent implements OnInit { - constructor() { } + song: Observable; + + constructor(private data: DataService) { } ngOnInit() { + // Load the first song from the API + this.song = this.data.getSong(0); } } diff --git a/src/app/components/nav/nav.component.html b/src/app/components/nav/nav.component.html new file mode 100644 index 0000000..f23d834 --- /dev/null +++ b/src/app/components/nav/nav.component.html @@ -0,0 +1 @@ +

nav works!

diff --git a/src/app/components/nav/nav.component.scss b/src/app/components/nav/nav.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/nav/nav.component.spec.ts b/src/app/components/nav/nav.component.spec.ts new file mode 100644 index 0000000..c386910 --- /dev/null +++ b/src/app/components/nav/nav.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavComponent } from './nav.component'; + +describe('NavComponent', () => { + let component: NavComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NavComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/nav/nav.component.ts b/src/app/components/nav/nav.component.ts new file mode 100644 index 0000000..2cc48b6 --- /dev/null +++ b/src/app/components/nav/nav.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-nav', + templateUrl: './nav.component.html', + styleUrls: ['./nav.component.scss'] +}) +export class NavComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +}