cleaned up template
This commit is contained in:
nikurasu
parent
0fb191a129
commit
32133cc1e3
|
|
@ -27,7 +27,6 @@
|
|||
"@angular/cli": "~14.2.3",
|
||||
"@angular/compiler-cli": "^14.2.0",
|
||||
"@types/jasmine": "~4.0.0",
|
||||
"angular-in-memory-web-api": "^0.14.0",
|
||||
"jasmine-core": "~4.3.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
|
||||
import { HeroesComponent } from './heroes/heroes.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{path: 'heroes', component: HeroesComponent},
|
||||
{path: 'dashboard', component: DashboardComponent},
|
||||
{path: 'detail/:id', component: HeroDetailComponent},
|
||||
{path: '', redirectTo: '/dashboard', pathMatch: 'full'},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<h1>{{ title }}</h1>
|
||||
<nav>
|
||||
<a routerLink="/dashboard">Dashboard</a>
|
||||
<a routerLink="/heroes">Heroes</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
<app-messages></app-messages>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/* AppComponent's private CSS styles */
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
nav a {
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
background-color: #e8e8e8;
|
||||
color: #3d3d3d;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: white;
|
||||
background-color: #42545C;
|
||||
}
|
||||
nav a:active {
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -1,35 +1,18 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
|
||||
import { InMemoryDataService } from './in-memory-data.service';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { HeroesComponent } from './heroes/heroes.component';
|
||||
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
|
||||
import { MessagesComponent } from './messages/messages.component';
|
||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||
import { HeroSearchComponent } from './hero-search/hero-search.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroesComponent,
|
||||
HeroDetailComponent,
|
||||
MessagesComponent,
|
||||
DashboardComponent,
|
||||
HeroSearchComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule,
|
||||
HttpClientInMemoryWebApiModule.forRoot(
|
||||
InMemoryDataService, {dataEncapsulation: false},
|
||||
),
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<h2>Top Heroes</h2>
|
||||
<div class="heroes-menu">
|
||||
<a *ngFor="let hero of heroes" routerLink="/detail/{{hero.id}}">
|
||||
{{hero.name}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<app-hero-search></app-hero-search>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
/* DashboardComponent's private CSS styles */
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroes-menu {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
|
||||
/* flexbox */
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: #3f525c;
|
||||
border-radius: 2px;
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
min-width: 70px;
|
||||
margin: .5rem auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* flexbox */
|
||||
order: 0;
|
||||
flex: 0 1 auto;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
a {
|
||||
width: 18%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
describe('DashboardComponent', () => {
|
||||
let component: DashboardComponent;
|
||||
let fixture: ComponentFixture<DashboardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Hero } from '../hero';
|
||||
import { HeroService } from '../hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
heroes: Hero[] = []
|
||||
|
||||
constructor(private heroService: HeroService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getHeroes()
|
||||
}
|
||||
|
||||
getHeroes(): void {
|
||||
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes.slice(1,5))
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<div *ngIf="hero">
|
||||
<h2>{{hero.name | uppercase}} Details</h2>
|
||||
<div>id: {{hero.id}}</div>
|
||||
<div>
|
||||
<label for="hero-name">Hero name: </label>
|
||||
<input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
|
||||
</div>
|
||||
<button type="button" (click)="goBack()">go back</button>
|
||||
<button type="button" (click)="save()">save</button>
|
||||
</div>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/* HeroDetailComponent's private CSS styles */
|
||||
label {
|
||||
color: #435960;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
font-size: 1em;
|
||||
padding: .5rem;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
margin-right: .5rem;
|
||||
background-color: #eee;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #eee;
|
||||
color: #ccc;
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
|
||||
describe('HeroDetailComponent', () => {
|
||||
let component: HeroDetailComponent;
|
||||
let fixture: ComponentFixture<HeroDetailComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ HeroDetailComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HeroDetailComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Hero } from '../hero';
|
||||
import { HeroService } from '../hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hero-detail',
|
||||
templateUrl: './hero-detail.component.html',
|
||||
styleUrls: ['./hero-detail.component.scss']
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
hero: Hero | undefined
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private location: Location,
|
||||
private heroService: HeroService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getHero()
|
||||
}
|
||||
|
||||
getHero(): void {
|
||||
const id = Number(this.route.snapshot.paramMap.get('id'));
|
||||
this.heroService.getHero(id)
|
||||
.subscribe(hero => this.hero = hero);
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.location.back()
|
||||
}
|
||||
|
||||
save(): void {
|
||||
if(this.hero){
|
||||
this.heroService.updateHero(this.hero).subscribe(() => this.goBack())
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<div id="search-component">
|
||||
<label for="search-box">Hero Search</label>
|
||||
<input #searchBox id="search-box" (input)="search(searchBox.value)">
|
||||
|
||||
<ul class="search-result">
|
||||
<li *ngFor="let hero of heroes$ | async">
|
||||
|
||||
<a routerLink="/detail/{{hero.id}}">
|
||||
{{hero.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/* HeroSearch private styles */
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
}
|
||||
input {
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: #336699 auto 1px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.search-result li a {
|
||||
border-bottom: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: .5rem;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.search-result li a:hover {
|
||||
background-color: #435A60;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul.search-result {
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeroSearchComponent } from './hero-search.component';
|
||||
|
||||
describe('HeroSearchComponent', () => {
|
||||
let component: HeroSearchComponent;
|
||||
let fixture: ComponentFixture<HeroSearchComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ HeroSearchComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HeroSearchComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { debounceTime, distinctUntilChanged, Observable, Subject, switchMap } from 'rxjs';
|
||||
import { Hero } from '../hero';
|
||||
import { HeroService } from '../hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hero-search',
|
||||
templateUrl: './hero-search.component.html',
|
||||
styleUrls: ['./hero-search.component.scss']
|
||||
})
|
||||
export class HeroSearchComponent implements OnInit {
|
||||
heroes$!: Observable<Hero[]>
|
||||
private searchTerms = new Subject<string>()
|
||||
|
||||
constructor(
|
||||
private heroService: HeroService
|
||||
) { }
|
||||
|
||||
search(term: string): void {
|
||||
this.searchTerms.next(term)
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.heroes$ = this.searchTerms.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
switchMap((term: string) => this.heroService.searchHeroes(term))
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
describe('HeroService', () => {
|
||||
let service: HeroService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(HeroService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { catchError, Observable, of, pipe, tap } from 'rxjs';
|
||||
import { Hero } from './hero';
|
||||
import { MessageService } from './messages.service';
|
||||
import { HEROES } from './mock-heroes';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HeroService {
|
||||
httpOptions = {
|
||||
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
|
||||
};
|
||||
|
||||
private heroesUrl = 'api/heroes'
|
||||
|
||||
constructor(private messageService: MessageService, private http: HttpClient) { }
|
||||
|
||||
getHeroes(): Observable<Hero[]> {
|
||||
return this.http.get<Hero[]>(this.heroesUrl).pipe(
|
||||
tap(_ => this.log('fetched Heroes')),
|
||||
catchError(this.handleError<Hero[]>('getHeroes', []))
|
||||
)
|
||||
}
|
||||
|
||||
getHero(id: number): Observable<Hero> {
|
||||
const url = `${this.heroesUrl}/${id}`
|
||||
return this.http.get<Hero>(url).pipe(
|
||||
tap(_ => this.log(`fetched hero id=${id}`)),
|
||||
catchError(this.handleError<Hero>(`getHero id=${id}`))
|
||||
)
|
||||
}
|
||||
|
||||
updateHero(hero: Hero): Observable<any> {
|
||||
return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
|
||||
tap(_ => this.log(`updated hero id=${hero.id}`)),
|
||||
catchError(this.handleError<any>(`updatedHero`))
|
||||
)
|
||||
}
|
||||
|
||||
addHero(hero: Hero): Observable<Hero> {
|
||||
return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
|
||||
tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
|
||||
catchError(this.handleError<Hero>('addHero'))
|
||||
)
|
||||
}
|
||||
|
||||
deleteHero(id: number): Observable<Hero> {
|
||||
const url = `${this.heroesUrl}/${id}`
|
||||
|
||||
return this.http.delete<Hero>(url, this.httpOptions).pipe(
|
||||
tap(_ => this.log(`deleted hero id=${id}`)),
|
||||
catchError(this.handleError<Hero>('deleteHero'))
|
||||
)
|
||||
}
|
||||
|
||||
searchHeroes(term: string): Observable<Hero[]> {
|
||||
if (!term.trim()) {
|
||||
return of([])
|
||||
}
|
||||
return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
|
||||
tap(x => x.length ?
|
||||
this.log(`found heroes matching "${term}"`) :
|
||||
this.log(`no heroes matching "${term}"`)),
|
||||
catchError(this.handleError<Hero[]>('searchHeroes', []))
|
||||
)
|
||||
}
|
||||
|
||||
private log(message: string) {
|
||||
this.messageService.add(`HeroService: ${message}`)
|
||||
}
|
||||
|
||||
private handleError<T>(operation = 'operation', result?: T) {
|
||||
return (error: any): Observable<T> => {
|
||||
console.log(error);
|
||||
this.log(`${operation} failed: ${error} message`)
|
||||
return of(result as T)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export interface Hero {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<h2>Heroes</h2>
|
||||
<div>
|
||||
<label for="new-hero">Hero name: </label>
|
||||
<input id="new-hero" #heroName />
|
||||
|
||||
<!-- (click) passes input value to add() and then clears the input -->
|
||||
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
|
||||
Add hero
|
||||
</button>
|
||||
</div>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="let hero of heroes">
|
||||
<a routerLink="/detail/{{hero.id}}">
|
||||
<span class="badge">{{hero.id}}</span>{{hero.name}}
|
||||
</a>
|
||||
<button type="button" class="delete" title="delete hero" (click)="delete(hero)">x</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
/* HeroesComponent's private CSS styles */
|
||||
.heroes {
|
||||
margin: 0 0 2em 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .5rem;
|
||||
margin: 1rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.heroes li {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heroes li:hover {
|
||||
left: .1em;
|
||||
}
|
||||
|
||||
.heroes a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
height: 1.6em;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heroes a:hover {
|
||||
color: #2c3a41;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.heroes a:active {
|
||||
background-color: #525252;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.heroes .badge {
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
color: white;
|
||||
padding: 0.8em 0.7em 0 0.7em;
|
||||
background-color: #405061;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
height: 1.8em;
|
||||
min-width: 16px;
|
||||
text-align: right;
|
||||
margin-right: .8em;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: .5rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
color: white;
|
||||
background-color: #42545C;
|
||||
}
|
||||
|
||||
button.delete {
|
||||
position: absolute;
|
||||
left: 210px;
|
||||
top: 5px;
|
||||
background-color: white;
|
||||
color: #525252;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
padding: 1px 10px 3px 10px;
|
||||
}
|
||||
|
||||
button.delete:hover {
|
||||
background-color: #525252;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
|
||||
describe('HeroesComponent', () => {
|
||||
let component: HeroesComponent;
|
||||
let fixture: ComponentFixture<HeroesComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ HeroesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HeroesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Hero } from '../hero';
|
||||
import { HeroService } from '../hero.service';
|
||||
import { MessageService } from '../messages.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-heroes',
|
||||
templateUrl: './heroes.component.html',
|
||||
styleUrls: ['./heroes.component.scss']
|
||||
})
|
||||
export class HeroesComponent implements OnInit {
|
||||
|
||||
constructor(private heroService: HeroService, private messageService: MessageService) { }
|
||||
|
||||
heroes: Hero[] = []
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getHeroes()
|
||||
}
|
||||
|
||||
getHeroes(): void {
|
||||
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes)
|
||||
}
|
||||
|
||||
add(name: string): void {
|
||||
name = name.trim()
|
||||
if (!name) { return }
|
||||
this.heroService.addHero({ name } as Hero).subscribe((hero: Hero) => {this.heroes.push(hero)})
|
||||
}
|
||||
|
||||
delete(hero: Hero): void {
|
||||
this.heroes = this.heroes.filter(h => h !== hero)
|
||||
this.heroService.deleteHero(hero.id).subscribe()
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InMemoryDataService } from './in-memory-data.service';
|
||||
|
||||
describe('InMemoryDataService', () => {
|
||||
let service: InMemoryDataService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(InMemoryDataService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { InMemoryDbService } from 'angular-in-memory-web-api';
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InMemoryDataService implements InMemoryDbService {
|
||||
createDb() {
|
||||
const heroes = [
|
||||
{ id: 12, name: 'Dr. Nice' },
|
||||
{ id: 13, name: 'Bombasto' },
|
||||
{ id: 14, name: 'Celeritas' },
|
||||
{ id: 15, name: 'Magneta' },
|
||||
{ id: 16, name: 'RubberMan' },
|
||||
{ id: 17, name: 'Dynama' },
|
||||
{ id: 18, name: 'Dr. IQ' },
|
||||
{ id: 19, name: 'Magma' },
|
||||
{ id: 20, name: 'Tornado' }
|
||||
]
|
||||
return {heroes}
|
||||
}
|
||||
|
||||
genId(heroes: Hero[]): number {
|
||||
return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MessageService } from './messages.service';
|
||||
|
||||
describe('MessagesService', () => {
|
||||
let service: MessageService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(MessageService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MessageService {
|
||||
messages: string[] = []
|
||||
|
||||
add(message: string) {
|
||||
this.messages.push(message)
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.messages = []
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<div *ngIf="messageService.messages.length">
|
||||
|
||||
<h2>Messages</h2>
|
||||
<button type="button" class="clear" (click)="messageService.clear()">Clear Messages</button>
|
||||
<div *ngFor="let message of messageService.messages">{{message}}</div>
|
||||
</div>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/* MessagesComponent's private CSS styles */
|
||||
h2 {
|
||||
color: #A80000;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.clear {
|
||||
color: #333;
|
||||
background-color: #eee;
|
||||
margin-bottom: 12px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.clear:hover {
|
||||
color: white;
|
||||
background-color: #42545C;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MessagesComponent } from './messages.component';
|
||||
|
||||
describe('MessagesComponent', () => {
|
||||
let component: MessagesComponent;
|
||||
let fixture: ComponentFixture<MessagesComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ MessagesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MessagesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { MessageService } from '../messages.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-messages',
|
||||
templateUrl: './messages.component.html',
|
||||
styleUrls: ['./messages.component.scss']
|
||||
})
|
||||
export class MessagesComponent implements OnInit {
|
||||
|
||||
constructor(public messageService: MessageService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { Hero } from "./hero";
|
||||
|
||||
export const HEROES: Hero[] = [
|
||||
{ id: 12, name: 'Dr. Nice' },
|
||||
{ id: 13, name: 'Bombasto' },
|
||||
{ id: 14, name: 'Celeritas' },
|
||||
{ id: 15, name: 'Magneta' },
|
||||
{ id: 16, name: 'RubberMan' },
|
||||
{ id: 17, name: 'Dynama' },
|
||||
{ id: 18, name: 'Dr. IQ' },
|
||||
{ id: 19, name: 'Magma' },
|
||||
{ id: 20, name: 'Tornado' }
|
||||
]
|
||||
|
|
@ -1876,13 +1876,6 @@ ajv@^6.12.4, ajv@^6.12.5:
|
|||
json-schema-traverse "^0.4.1"
|
||||
uri-js "^4.2.2"
|
||||
|
||||
angular-in-memory-web-api@^0.14.0:
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.14.0.tgz#4f8aae27d5e59ecb7acbf17ceefb3393c30085a3"
|
||||
integrity sha512-8RLFBpXZONDQxYGKiheaYQQl3iydesCrhWLuzDD6AsQDcOF+HEvIuOfBdJaTWKfqyNZNWjHvXzIyT0bUIunb/A==
|
||||
dependencies:
|
||||
tslib "^2.3.0"
|
||||
|
||||
ansi-colors@4.1.3:
|
||||
version "4.1.3"
|
||||
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
|
||||
|
|
|
|||
Loading…
Reference in New Issue