Skip to content

Commit 3b4a477

Browse files
nitayneemannitayneeman
committed
Initial commit
0 parents  commit 3b4a477

33 files changed

+903
-0
lines changed

‎app/app-routing.module.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
4+
const routes: Routes = [
5+
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
6+
];
7+
8+
@NgModule({
9+
imports: [
10+
RouterModule.forRoot(routes)
11+
],
12+
exports: [
13+
RouterModule
14+
]
15+
})
16+
export class AppRoutingModule {
17+
}

‎app/app.component.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
h1 {
2+
font-size: 1.2em;
3+
color: #999;
4+
margin-bottom: 0;
5+
}
6+
7+
h2 {
8+
font-size: 2em;
9+
margin-top: 0;
10+
padding-top: 0;
11+
}
12+
13+
nav a {
14+
padding: 5px 10px;
15+
text-decoration: none;
16+
margin-top: 10px;
17+
display: inline-block;
18+
background-color: #eee;
19+
border-radius: 4px;
20+
}
21+
22+
nav a:visited, a:link {
23+
color: #607D8B;
24+
}
25+
26+
nav a:hover {
27+
color: #039be5;
28+
background-color: #CFD8DC;
29+
}
30+
31+
nav a.active {
32+
color: #039be5;
33+
}

‎app/app.component.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<h1>{{title}}</h1>
2+
<nav>
3+
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
4+
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
5+
</nav>
6+
<router-outlet></router-outlet>

‎app/app.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'my-app',
5+
templateUrl: './app.component.html',
6+
styleUrls: ['./app.component.css']
7+
})
8+
export class AppComponent {
9+
title = 'Tour of Heroes';
10+
}

‎app/app.module.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
// Imports for loading & configuring the in-memory web api
5+
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
6+
import { InMemoryDataService } from './in-memory-data.service';
7+
8+
import { AppRoutingModule } from './app-routing.module';
9+
import { DashboardModule } from './dashboard/dashboard.module';
10+
import { HeroDetailModule } from './hero-detail/hero-detail.module';
11+
import { HeroesModule } from './heroes/heroes.module';
12+
import { CoreModule } from './core/core.module';
13+
import { SharedModule } from './shared/shared.module';
14+
import { AppComponent } from './app.component';
15+
16+
@NgModule({
17+
imports: [
18+
BrowserModule,
19+
InMemoryWebApiModule.forRoot(InMemoryDataService),
20+
AppRoutingModule,
21+
DashboardModule,
22+
HeroDetailModule,
23+
HeroesModule,
24+
CoreModule,
25+
SharedModule
26+
],
27+
declarations: [
28+
AppComponent
29+
],
30+
bootstrap: [
31+
AppComponent
32+
]
33+
})
34+
export class AppModule {
35+
}

‎app/core/core.module.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule, ModuleWithProviders } from '@angular/core';
2+
import { HttpModule } from '@angular/http';
3+
4+
import { HeroService } from './hero.service';
5+
import { HeroSearchService } from './hero-search.service';
6+
7+
@NgModule({
8+
imports: [
9+
HttpModule
10+
],
11+
declarations: [],
12+
providers: [
13+
HeroService,
14+
HeroSearchService
15+
],
16+
exports: []
17+
})
18+
export class CoreModule {
19+
}

‎app/core/hero-search.service.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Injectable } from '@angular/core';
2+
import { Http } from '@angular/http';
3+
4+
import { Observable } from 'rxjs/Observable';
5+
import 'rxjs/add/operator/map';
6+
7+
import { Hero } from '../shared/hero';
8+
9+
@Injectable()
10+
export class HeroSearchService {
11+
12+
constructor(private http: Http) {
13+
}
14+
15+
search(term: string): Observable<Hero[]> {
16+
return this.http
17+
.get(`api/heroes/?name=${term}`)
18+
.map(response => response.json().data as Hero[]);
19+
}
20+
}

‎app/core/hero.service.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Injectable } from '@angular/core';
2+
import { Headers, Http } from '@angular/http';
3+
4+
import 'rxjs/add/operator/toPromise';
5+
6+
import { Hero } from '../shared/hero';
7+
8+
@Injectable()
9+
export class HeroService {
10+
11+
private headers = new Headers({ 'Content-Type': 'application/json' });
12+
private heroesUrl = 'api/heroes'; // URL to web api
13+
14+
constructor(private http: Http) {
15+
}
16+
17+
getHeroes(): Promise<Hero[]> {
18+
return this.http.get(this.heroesUrl)
19+
.toPromise()
20+
.then(response => response.json().data as Hero[])
21+
.catch(this.handleError);
22+
}
23+
24+
25+
getHero(id: number): Promise<Hero> {
26+
const url = `${this.heroesUrl}/${id}`;
27+
return this.http.get(url)
28+
.toPromise()
29+
.then(response => response.json().data as Hero)
30+
.catch(this.handleError);
31+
}
32+
33+
delete(id: number): Promise<void> {
34+
const url = `${this.heroesUrl}/${id}`;
35+
return this.http.delete(url, { headers: this.headers })
36+
.toPromise()
37+
.then(() => null)
38+
.catch(this.handleError);
39+
}
40+
41+
create(name: string): Promise<Hero> {
42+
return this.http
43+
.post(this.heroesUrl, JSON.stringify({ name: name }), { headers: this.headers })
44+
.toPromise()
45+
.then(res => res.json().data as Hero)
46+
.catch(this.handleError);
47+
}
48+
49+
update(hero: Hero): Promise<Hero> {
50+
const url = `${this.heroesUrl}/${hero.id}`;
51+
return this.http
52+
.put(url, JSON.stringify(hero), { headers: this.headers })
53+
.toPromise()
54+
.then(() => hero)
55+
.catch(this.handleError);
56+
}
57+
58+
private handleError(error: any): Promise<any> {
59+
console.error('An error occurred', error); // for demo purposes only
60+
return Promise.reject(error.message || error);
61+
}
62+
}
63+

‎app/dashboard/dashboard-routing.module.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
4+
import { DashboardComponent } from './dashboard.component';
5+
6+
const routes: Routes = [
7+
{ path: 'dashboard', component: DashboardComponent }
8+
];
9+
10+
@NgModule({
11+
imports: [
12+
RouterModule.forChild(routes)
13+
],
14+
exports: [
15+
RouterModule
16+
]
17+
})
18+
export class DashboardRoutingModule {
19+
}

‎app/dashboard/dashboard.component.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
[class*='col-'] {
2+
float: left;
3+
padding-right: 20px;
4+
padding-bottom: 20px;
5+
}
6+
7+
[class*='col-']:last-of-type {
8+
padding-right: 0;
9+
}
10+
11+
a {
12+
text-decoration: none;
13+
}
14+
15+
*, *:after, *:before {
16+
-webkit-box-sizing: border-box;
17+
-moz-box-sizing: border-box;
18+
box-sizing: border-box;
19+
}
20+
21+
h3 {
22+
text-align: center;
23+
margin-bottom: 0;
24+
}
25+
26+
h4 {
27+
position: relative;
28+
}
29+
30+
.grid {
31+
margin: 0;
32+
}
33+
34+
.col-1-4 {
35+
width: 25%;
36+
}
37+
38+
.module {
39+
padding: 20px;
40+
text-align: center;
41+
color: #eee;
42+
max-height: 120px;
43+
min-width: 120px;
44+
background-color: #607D8B;
45+
border-radius: 2px;
46+
}
47+
48+
.module:hover {
49+
background-color: #EEE;
50+
cursor: pointer;
51+
color: #607d8b;
52+
}
53+
54+
.grid-pad {
55+
padding: 10px 0;
56+
}
57+
58+
.grid-pad > [class*='col-']:last-of-type {
59+
padding-right: 20px;
60+
}
61+
62+
@media (max-width: 600px) {
63+
.module {
64+
font-size: 10px;
65+
max-height: 75px;
66+
}
67+
}
68+
69+
@media (max-width: 1024px) {
70+
.grid {
71+
margin: 0;
72+
}
73+
74+
.module {
75+
min-width: 60px;
76+
}
77+
}

‎app/dashboard/dashboard.component.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<h3>Top Heroes</h3>
2+
<div class="grid grid-pad">
3+
<a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">
4+
<div class="module hero">
5+
<h4>{{hero.name}}</h4>
6+
</div>
7+
</a>
8+
</div>
9+
<hero-search></hero-search>

‎app/dashboard/dashboard.component.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
import { Hero } from '../shared/hero';
4+
import { HeroService } from '../core/hero.service';
5+
6+
@Component({
7+
selector: 'my-dashboard',
8+
templateUrl: './dashboard.component.html',
9+
styleUrls: ['./dashboard.component.css']
10+
})
11+
export class DashboardComponent implements OnInit {
12+
heroes: Hero[] = [];
13+
14+
constructor(private heroService: HeroService) {
15+
}
16+
17+
ngOnInit(): void {
18+
this.heroService.getHeroes()
19+
.then(heroes => this.heroes = heroes.slice(1, 5));
20+
}
21+
}

‎app/dashboard/dashboard.module.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from '@angular/core';
2+
3+
import { DashboardRoutingModule } from './dashboard-routing.module';
4+
import { DashboardComponent } from './dashboard.component';
5+
import { SharedModule } from '../shared/shared.module';
6+
7+
@NgModule({
8+
imports: [
9+
DashboardRoutingModule,
10+
SharedModule
11+
],
12+
declarations: [
13+
DashboardComponent
14+
],
15+
exports: [
16+
DashboardComponent
17+
]
18+
})
19+
export class DashboardModule {
20+
}

‎app/hero-detail/hero-detail-routing.module.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
4+
import { HeroDetailComponent } from './hero-detail.component';
5+
6+
const routes: Routes = [
7+
{ path: 'detail/:id', component: HeroDetailComponent }
8+
];
9+
10+
@NgModule({
11+
imports: [
12+
RouterModule.forChild(routes)
13+
],
14+
exports: [
15+
RouterModule
16+
]
17+
})
18+
export class HeroDetailRoutingModule {
19+
}

0 commit comments

Comments
 (0)