Skip to content

Commit fabaf57

Browse files
moizKachwalamoizKachwala
committed
updated components and services to RC5
1 parent 7a970b0 commit fabaf57

File tree

11 files changed

+271
-226
lines changed

11 files changed

+271
-226
lines changed

‎client/app/app.component.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import {Component} from '@angular/core';
22

3-
// import {HeroesComponent} from './components/heroes/heroes.component';
4-
// import {HeroService} from "./services/hero.service";
5-
// import {DashboardComponent} from "./components/dashboard/dashboard.component";
6-
// import {HeroDetailComponent} from "./components/heroDetail/hero-detail.component";
7-
83
@Component({
94
selector:'my-app',
10-
template: '<h1>Angular2 updated to RC5</h1>'
5+
templateUrl: './app/app.html'
116
})
127

138
export class AppComponent {

‎client/app/app.html‎

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

‎client/app/app.module.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,33 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3+
import { FormsModule } from '@angular/forms';
4+
import { HttpModule } from '@angular/http';
5+
36
import { AppComponent } from './app.component';
7+
import { routing } from './app.routing';
8+
9+
import { HeroesComponent } from './components/heroes/heroes.component';
10+
import { DashboardComponent } from './components/dashboard/dashboard.component';
11+
import { HeroDetailComponent } from './components/heroDetail/hero-detail.component';
12+
13+
import { HeroService } from './services/hero.service';
414

515
@NgModule({
6-
imports: [ BrowserModule ],
7-
declarations: [ AppComponent ],
8-
bootstrap: [ AppComponent ]
16+
imports: [
17+
BrowserModule,
18+
HttpModule,
19+
FormsModule,
20+
routing
21+
],
22+
declarations: [
23+
AppComponent,
24+
HeroesComponent,
25+
DashboardComponent,
26+
HeroDetailComponent
27+
],
28+
providers: [
29+
HeroService
30+
],
31+
bootstrap: [AppComponent]
932
})
1033
export class AppModule { }

‎client/app/app.routing.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Routes, RouterModule } from '@angular/router';
2+
3+
import { DashboardComponent } from './components/dashboard/dashboard.component';
4+
import { HeroesComponent } from './components/heroes/heroes.component';
5+
import { HeroDetailComponent } from './components/heroDetail/hero-detail.component';
6+
7+
const appRoutes: Routes = [
8+
{
9+
path: '',
10+
redirectTo: '/dashboard',
11+
pathMatch: 'full'
12+
},
13+
{
14+
path: 'dashboard',
15+
component: DashboardComponent
16+
},
17+
{
18+
path: 'detail/:id',
19+
component: HeroDetailComponent
20+
},
21+
{
22+
path: 'heroes',
23+
component: HeroesComponent
24+
}
25+
];
26+
27+
export const routing = RouterModule.forRoot(appRoutes);

‎client/app/components/dashboard/dashboard.component.ts‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
1-
// /**
2-
// * Created by Moiz.Kachwala on 02-06-2016.
3-
// */
1+
/**
2+
* Created by Moiz.Kachwala on 02-06-2016.
3+
*/
44

5-
// import {Component, OnInit} from 'angular2/core';
6-
// import {Hero} from "../../models/hero";
7-
// import {HeroService} from "../../services/hero.service";
8-
// import { Router } from 'angular2/router';
5+
import {Component, OnInit} from '@angular/core';
6+
import { Router } from '@angular/router';
97

10-
// @Component({
11-
// selector: 'my-dashboard',
12-
// templateUrl: './app/components/dashboard/dashboard.component.html',
13-
// styleUrls:['./app/components/dashboard/dashboard.component.css']
14-
// })
8+
import {Hero} from "../../models/hero";
9+
import {HeroService} from "../../services/hero.service";
1510

16-
// export class DashboardComponent implements OnInit {
17-
// heroes: Hero[] = [];
11+
@Component({
12+
selector: 'my-dashboard',
13+
templateUrl: './app/components/dashboard/dashboard.component.html',
14+
styleUrls: ['./app/components/dashboard/dashboard.component.css']
15+
})
1816

19-
// constructor(
20-
// private router: Router,
21-
// private heroService: HeroService) {
22-
// }
17+
export class DashboardComponent implements OnInit {
18+
heroes: Hero[] = [];
2319

24-
// ngOnInit() {
25-
// this.heroService.getHeroes()
26-
// .then(heroes => this.heroes = heroes);
27-
// }
20+
constructor(
21+
private router: Router,
22+
private heroService: HeroService) {
23+
}
2824

29-
// gotoDetail(hero: Hero) {
30-
// let link = ['HeroDetail', { id: hero._id }];
31-
// this.router.navigate(link);
32-
// }
33-
// }
25+
ngOnInit() {
26+
this.heroService.getHeroes()
27+
.then(heroes => this.heroes = heroes);
28+
}
29+
30+
gotoDetail(hero: Hero) {
31+
let link = ['/detail', hero._id];
32+
this.router.navigate(link);
33+
}
34+
}

‎client/app/components/heroDetail/hero-detail.component.ts‎

Lines changed: 55 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,55 @@
1-
// /**
2-
// * Created by Moiz.Kachwala on 02-06-2016.
3-
// */
4-
5-
// import {Component, Input, OnInit} from 'angular2/core';
6-
// import {Hero} from "../../models/hero";
7-
// import { RouteParams } from 'angular2/router';
8-
// import {HeroService} from "../../services/hero.service";
9-
10-
// @Component({
11-
// selector: 'my-hero-detail',
12-
// templateUrl:'./app/components/heroDetail/hero-detail.component.html',
13-
// styleUrls:['./app/components/heroDetail/hero-detail.component.css']
14-
// })
15-
16-
// export class HeroDetailComponent implements OnInit {
17-
// @Input() hero: Hero;
18-
// newHero = false;
19-
// error: any;
20-
// navigated = false; // true if navigated here
21-
22-
23-
// constructor(
24-
// private heroService: HeroService,
25-
// private routeParams: RouteParams) {
26-
// }
27-
28-
// ngOnInit() {
29-
// let id = this.routeParams.get('id');
30-
// if (id === 'new') {
31-
// this.newHero = true;
32-
// this.hero = new Hero();
33-
// }else {
34-
// this.newHero = false;
35-
// this.heroService.getHero(id)
36-
// .then(hero => this.hero = hero);
37-
// }
38-
// }
39-
40-
// save() {
41-
// this.heroService
42-
// .save(this.hero)
43-
// .then(hero => {
44-
// this.hero = hero; // saved hero, w/ id if new
45-
// this.goBack();
46-
// })
47-
// .catch(error => this.error = error); // TODO: Display error message
48-
// }
49-
50-
// goBack() {
51-
// window.history.back();
52-
// }
53-
// }
1+
/**
2+
* Created by Moiz.Kachwala on 02-06-2016.
3+
*/
4+
5+
import {Component, Input, OnInit} from '@angular/core';
6+
import {Hero} from "../../models/hero";
7+
import { ActivatedRoute, Params } from '@angular/router';
8+
import {HeroService} from "../../services/hero.service";
9+
10+
@Component({
11+
selector: 'my-hero-detail',
12+
templateUrl: './app/components/heroDetail/hero-detail.component.html',
13+
styleUrls: ['./app/components/heroDetail/hero-detail.component.css']
14+
})
15+
16+
export class HeroDetailComponent implements OnInit {
17+
@Input() hero: Hero;
18+
newHero = false;
19+
error: any;
20+
navigated = false; // true if navigated here
21+
22+
23+
constructor(
24+
private heroService: HeroService,
25+
private route: ActivatedRoute) {
26+
}
27+
28+
ngOnInit() {
29+
this.route.params.forEach((params: Params) => {
30+
let id = params['id'];
31+
if (id === 'new') {
32+
this.newHero = true;
33+
this.hero = new Hero();
34+
} else {
35+
this.newHero = false;
36+
this.heroService.getHero(id)
37+
.then(hero => this.hero = hero);
38+
}
39+
});
40+
}
41+
42+
save() {
43+
this.heroService
44+
.save(this.hero)
45+
.then(hero => {
46+
this.hero = hero; // saved hero, w/ id if new
47+
this.goBack();
48+
})
49+
.catch(error => this.error = error); // TODO: Display error message
50+
}
51+
52+
goBack() {
53+
window.history.back();
54+
}
55+
}

‎client/app/components/heroes/heroes.component.ts‎

Lines changed: 44 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,51 @@
1-
// /**
2-
// * Created by Moiz.Kachwala on 02-06-2016.
3-
// */
4-
// import {Component, OnInit} from 'angular2/core';
5-
// import {HeroService} from "../../services/hero.service";
6-
// import {Hero} from "../../models/hero";
7-
// import {HeroDetailComponent} from "../heroDetail/hero-detail.component";
8-
// import { Router } from 'angular2/router';
1+
/**
2+
* Created by Moiz.Kachwala on 02-06-2016.
3+
*/
4+
import {Component, OnInit} from '@angular/core';
5+
import {HeroService} from "../../services/hero.service";
6+
import {Hero} from "../../models/hero";
7+
import { Router } from '@angular/router';
98

10-
// @Component({
11-
// selector: 'my-heroes',
12-
// templateUrl: './app/components/heroes/heroes.component.html',
13-
// styleUrls: ['./app/components/heroes/heroes.component.css'],
14-
// providers:[HeroService],
15-
// directives:[HeroDetailComponent]
16-
// })
9+
@Component({
10+
selector: 'my-heroes',
11+
templateUrl: './app/components/heroes/heroes.component.html',
12+
styleUrls: ['./app/components/heroes/heroes.component.css']
13+
})
1714

18-
// export class HeroesComponent implements OnInit {
15+
export class HeroesComponent implements OnInit {
1916

20-
// heroes: Hero[];
21-
// selectedHero: Hero;
22-
// error: any;
17+
heroes: Hero[];
18+
selectedHero: Hero;
19+
error: any;
2320

24-
// constructor(
25-
// private router: Router,
26-
// private heroService: HeroService) { }
27-
// getHeroes() {
28-
// this.heroService.getHeroes().then(heroes => this.heroes = heroes);
29-
// }
30-
// ngOnInit() {
31-
// this.getHeroes();
32-
// }
33-
// onSelect(hero: Hero) { this.selectedHero = hero; }
21+
constructor(
22+
private router: Router,
23+
private heroService: HeroService) { }
24+
getHeroes() {
25+
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
26+
}
27+
ngOnInit() {
28+
this.getHeroes();
29+
}
30+
onSelect(hero: Hero) { this.selectedHero = hero; }
3431

35-
// gotoDetail() {
36-
// this.router.navigate(['HeroDetail', { id: this.selectedHero._id }]);
37-
// }
32+
gotoDetail() {
33+
this.router.navigate(['/detail', this.selectedHero._id]);
34+
}
3835

39-
// addHero() {
40-
// this.selectedHero = null;
41-
// this.router.navigate(['HeroDetail', { id: 'new' }]);
42-
// }
36+
addHero() {
37+
this.selectedHero = null;
38+
this.router.navigate(['/detail', 'new']);
39+
}
4340

44-
// deleteHero(hero: Hero, event: any) {
45-
// event.stopPropagation();
46-
// this.heroService
47-
// .delete(hero)
48-
// .then(res => {
49-
// this.heroes = this.heroes.filter(h => h !== hero);
50-
// if (this.selectedHero === hero) { this.selectedHero = null; }
51-
// })
52-
// .catch(error => this.error = error);
53-
// }
54-
// }
41+
deleteHero(hero: Hero, event: any) {
42+
event.stopPropagation();
43+
this.heroService
44+
.delete(hero)
45+
.then(res => {
46+
this.heroes = this.heroes.filter(h => h !== hero);
47+
if (this.selectedHero === hero) { this.selectedHero = null; }
48+
})
49+
.catch(error => this.error = error);
50+
}
51+
}

0 commit comments

Comments
 (0)