Browse Source

Update for the final version of Angular2

It lost some functionality, but it was never put to use.
master
Gergely Polonkai 5 years ago
parent
commit
3e02eb4abb
  1. 27
      app/app-routing.module.ts
  2. 9
      app/app.component.ts
  3. 19
      app/app.module.ts
  4. 28
      app/app.routing.ts
  5. 11
      app/dashboard.component.css
  6. 12
      app/dashboard.component.html
  7. 16
      app/dashboard.component.ts
  8. 11
      app/duck-detail.component.html
  9. 33
      app/duck-detail.component.ts
  10. 11
      app/duck-search.component.html
  11. 43
      app/duck-search.component.ts
  12. 15
      app/duck-search.service.ts
  13. 51
      app/duck.service.ts
  14. 17
      app/ducks.component.html
  15. 52
      app/ducks.component.ts
  16. 15
      app/in-memory-data.service.ts
  17. 1
      app/models.ts
  18. 12
      app/rxjs-extensions.ts
  19. 12
      index.html
  20. 87
      package.json
  21. 14
      styles.css
  22. 74
      systemjs.config.js
  23. 20
      tsconfig.json
  24. 7
      typings.json

27
app/app-routing.module.ts

@ -0,0 +1,27 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { DashboardComponent } from "./dashboard.component";
import { DucksComponent } from "./ducks.component";
const routes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent,
},
{
path: 'ducks',
component: DucksComponent
}
]
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

9
app/app.component.ts

@ -1,7 +1,10 @@
import { Component } from "@angular/core";
@Component({
selector: "duckbook-front",
templateUrl: "/app/app.component.html"
moduleId: module.id,
selector: "duckbook-front-app",
templateUrl: "app.component.html"
})
export class AppComponent {}
export class AppComponent {
title = "Rubber Duck Booking Tool";
}

19
app/app.module.ts

@ -1,37 +1,32 @@
import "./rxjs-extensions";
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { InMemoryWebApiModule } from "angular2-in-memory-web-api";
import { InMemoryDataService } from "./in-memory-data.service";
import { AppRoutingModule } from "./app-routing.module";
import { routing } from "./app.routing";
import { InMemoryWebApiModule } from "angular-in-memory-web-api";
import { InMemoryDataService } from "./in-memory-data.service";
import { AppComponent } from "./app.component";
import { DucksComponent } from "./ducks.component";
import { DuckDetailComponent } from "./duck-detail.component";
import { DashboardComponent } from "./dashboard.component";
import { DuckSearchComponent } from "./duck-search.component";
import { DucksComponent } from "./ducks.component";
import { DuckService } from "./duck.service";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
routing
AppRoutingModule
],
declarations: [
AppComponent,
DucksComponent,
DashboardComponent,
DuckDetailComponent,
DuckSearchComponent,
DashboardComponent
DucksComponent
],
providers: [ DuckService ],
bootstrap: [ AppComponent ]

28
app/app.routing.ts

@ -1,28 +0,0 @@
import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { DucksComponent } from "./ducks.component";
import { DuckDetailComponent } from "./duck-detail.component";
import { DashboardComponent } from "./dashboard.component";
const appRoutes: Routes = [
{
path: "",
redirectTo: "/dashboard",
pathMatch: "full"
},
{
path: "dashboard",
component: DashboardComponent
},
{
path: "ducks",
component: DucksComponent
},
{
path: "detail/:id",
component: DuckDetailComponent
}
]
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

11
app/dashboard.component.css

@ -0,0 +1,11 @@
.duck-link .image {
background-color: black;
width: 64px;
height: 64px;
border-radius: 50%;
margin-right: 1em;
}
.duck-link .small {
margin-bottom: 0;
}

12
app/dashboard.component.html

@ -1,4 +1,10 @@
<div *ngFor="let duck of ducks" (click)="gotoDetail(duck)">
{{ duck.color }}
<h3>Duck Dashboard!</h3>
<div class="list-group">
<a *ngFor="let duck of ducks"
class="list-group-item duck-link"
href="#">
<div class="image pull-left"></div>
{{ duck.name }}
<p class="clearfix small">Something.</p>
</a>
</div>
<duck-search></duck-search>

16
app/dashboard.component.ts

@ -1,27 +1,19 @@
import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { DuckService } from "./duck.service";
import { Duck } from "./models";
@Component({
selector: "dashboard",
templateUrl: "/app/dashboard.component.html"
templateUrl :"app/dashboard.component.html",
styleUrls: ["app/dashboard.component.css"]
})
export class DashboardComponent implements OnInit {
ducks: Duck[] = [];
constructor(private router: Router,
private duckService: DuckService)
{}
constructor(private duckService: DuckService) {}
ngOnInit(): void {
this.duckService.getDucks()
.then(ducks => this.ducks = ducks.slice(1, 5));
}
gotoDetail(duck: Duck): void {
let link = ['/detail', duck.id];
this.router.navigate(link);
.then(ducks => this.ducks = ducks);
}
}

11
app/duck-detail.component.html

@ -1,12 +1,3 @@
<div *ngIf="duck">
<div>
<label>id: </label>
{{ duck.id }}
</div>
<div>
<label>color: </label>
<input [(ngModel)]="duck.color" placeholder="Color" />
</div>
<button (click)="save()">Save</button>
<button (click)="goBack()">Back</button>
<h2>{{ duck.name }}</h2>
</div>

33
app/duck-detail.component.ts

@ -1,17 +1,22 @@
import { Component, Input, OnInit } from "@angular/core";
import { Component, OnInit} from "@angular/core";
import { ActivatedRoute, Params } from "@angular/router";
import { DuckService } from "./duck.service";
import { Location } from "@angular/common";
import { Duck } from "./models";
import { DuckService } from "./duck.service";
@Component({
moduleId: module.id,
selector: "duck-detail",
templateUrl: "/app/duck-detail.component.html"
templateUrl: "duck-detail.component.html"
})
export class DuckDetailComponent implements OnInit {
constructor(private duckService: DuckService,
private route: ActivatedRoute)
export class DuckDetailComponent {
duck: Duck;
constructor(
private duckService: DuckService,
private route: ActivatedRoute,
private location: Location)
{}
ngOnInit(): void {
@ -19,18 +24,6 @@ export class DuckDetailComponent implements OnInit {
let id = +params['id'];
this.duckService.getDuck(id)
.then(duck => this.duck = duck);
});
})
}
goBack(): void {
window.history.back();
}
save(): void {
this.duckService.update(this.duck)
.then(this.goBack);
}
@Input()
duck: Duck;
}

11
app/duck-search.component.html

@ -1,11 +0,0 @@
<div id="search-component">
<h4>Duck search</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)">
<div>
<div *ngFor="let duck of ducks | async"
(click)="gotoDetail(duck)"
class="search-result">
{{ duck.color }}
</div>
</div>
</div>

43
app/duck-search.component.ts

@ -1,43 +0,0 @@
import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs/Subject";
import { DuckSearchService } from "./duck-search.service";
import { Duck } from "./models";
@Component({
selector: "duck-search",
templateUrl: "/app/duck-search.component.html",
providers: [ DuckSearchService ]
})
export class DuckSearchComponent implements OnInit {
ducks: Observable<Duck[]>;
private searchTerm = new Subject<string>();
constructor(private duckSearchService: DuckSearchService,
private router: Router)
{}
search(term: string): void {
this.searchTerm.next(term);
}
ngOnInit(): void {
this.ducks = this.searchTerm
.debounceTime(300) // wait for 300ms pause in events
.distinctUntilChanged() // ignore if next search term is same as previous
.switchMap(term => term // switch to new observable each time
? this.duckSearchService.search(term)
: Observable.of<Duck[]>([]))
.catch(error => {
console.log(error);
return Observable.of<Duck[]>([]);
});
}
gotoDetail(duck: Duck): void {
let link = ['/detail', duck.id];
this.router.navigate(link);
}
}

15
app/duck-search.service.ts

@ -1,15 +0,0 @@
import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import { Observable } from "rxjs";
import { Duck } from "./models";
@Injectable()
export class DuckSearchService {
constructor (private http: Http) {}
search(term: string): Observable<Duck[]> {
return this.http.get(`app/ducks/?color=${term}`)
.map((r: Response) => r.json().data as Duck[]);
}
}

51
app/duck.service.ts

@ -7,50 +7,33 @@ import { Duck } from "./models";
@Injectable()
export class DuckService {
private ducksUrl = 'app/ducks';
private headers = new Headers({"Content-Type": "application/json"});
private ducksUrl = 'app/ducks';
constructor(private http: Http) {}
private handleError(error: any): Promise<any> {
console.error("An error occured", error);
return Promise.reject(error.message || error);
}
create(color: string): Promise<Duck> {
return this.http.post(this.ducksUrl, JSON.stringify({color: color}), {headers: this.headers})
.toPromise()
.then((res) => res.json().data)
.catch(this.handleError);
getDucks(): Promise<Duck[]> {
return this.http.get(this.ducksUrl)
.toPromise()
.then(response => response.json().data as Duck[])
.catch(this.handleError);
}
update(duck: Duck): Promise<Duck> {
const url = `${this.ducksUrl}/${duck.id}`;
return this.http.put(url, JSON.stringify(duck), {headers: this.headers})
.toPromise()
.then(() => duck)
.catch(this.handleError);
getDuck(id: number): Promise<Duck> {
return this.getDucks()
.then(ducks => ducks.find(duck => duck.id === id));
}
delete(id: number): Promise<void> {
let url = `${this.ducksUrl}/${id}`;
return this.http.delete(url, {headers: this.headers})
.toPromise()
.then(() => null)
.catch(this.handleError);
create(name: string): Promise<Duck> {
return this.http.post(this.ducksUrl, JSON.stringify({name: name}), {headers: this.headers})
.toPromise()
.then(res => res.json().data)
.catch(this.handleError);
}
getDucks(): Promise<Duck[]> {
return this.http.get(this.ducksUrl)
.toPromise()
.then(response => response.json().data as Duck[])
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error("An error occured", error);
getDuck(id: number): Promise<Duck> {
return this.getDucks().then(ducks => ducks.find(duck => duck.id === id));
return Promise.reject(error.message || error);
}
}

17
app/ducks.component.html

@ -1,17 +1,6 @@
<h1>Hello!</h1>
<ul>
<li *ngFor="let duck of ducks" (click)="onSelect(duck)">
{{ duck.color }}
<button (click)="delete(duck); $event.stopPropagation()">Delete</button>
<li *ngFor="let duck of ducks">
<span class="badge">{{ duck.id }}</span>
{{ duck.name }}
</li>
</ul>
<div>
<label>Duck color:</label>
<input #duckColor>
<button (click)="add(duckColor.value); duckColor.value = ''">Add</button>
</div>
<div *ngIf="selectedDuck">
{{ selectedDuck.color }}
<button (click)="gotoDetail(selectedDuck)">Edit</button>
</div>

52
app/ducks.component.ts

@ -5,54 +5,42 @@ import { Duck } from "./models";
import { DuckService } from "./duck.service";
@Component({
moduleId: module.id,
selector: "ducks",
templateUrl: "/app/ducks.component.html",
providers: [ DuckService ]
templateUrl: "ducks.component.html"
})
export class DucksComponent implements OnInit {
ducks = [];
export class DucksComponent {
ducks: Duck[];
selectedDuck: Duck;
constructor(private router: Router,
private duckService: DuckService)
constructor(private duckService: DuckService,
private router: Router)
{}
ngOnInit(): void {
this.getDucks();
}
getDucks(): void {
this.duckService.getDucks().then(ducks => this.ducks = ducks);
getDucks(): void
{
this.duckService
.getDucks()
.then(ducks => this.ducks = ducks);
}
onSelect(duck: Duck): void {
this.selectedDuck = duck;
}
add(name: string): void {
name = name.trim();
gotoDetail(duck: Duck): void {
this.router.navigate(['/detail', duck.id]);
}
if (!name) { return; }
add(color: string): void {
// Make sure the color is not empty
color = color.trim();
if (!color) { return; }
this.duckService.create(color)
this.duckService.create(name)
.then(duck => {
this.ducks.push(duck);
this.selectedDuck = null;
});
}
delete(duck: Duck): void {
this.duckService.delete(duck.id)
.then(() => {
this.ducks = this.ducks.filter(d => d !== duck);
ngOnInit(): void {
this.getDucks();
}
if (this.selectedDuck === duck) {
this.selectedDuck = null;
}
});
onSelect(duck: Duck): void {
this.selectedDuck = duck;
}
}

15
app/in-memory-data.service.ts

@ -1,11 +1,18 @@
import { InMemoryDbService } from "angular2-in-memory-web-api";
import { InMemoryDbService } from "angular-in-memory-web-api";
export class InMemoryDataService implements InMemoryDbService {
createDb() {
let ducks = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'pink' }
{
id: 1,
name: "Fastfingers",
color: "#ee6aa7"
},
{
id: 2,
name: "Lady Pickett",
color: "#8b8b00"
}
];
return {ducks};

1
app/models.ts

@ -1,4 +1,5 @@
export class Duck {
id: number;
name: string;
color: string;
}

12
app/rxjs-extensions.ts

@ -1,12 +0,0 @@
// Observable class extensions
import "rxjs/add/observable/of";
import "rxjs/add/observable/throw";
// Observable operators
import "rxjs/add/operator/catch";
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged";
import "rxjs/add/operator/do";
import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";
import "rxjs/add/operator/switchMap";

12
index.html

@ -1,29 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rubber Duck Booking Tool</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<duckbook-front>Loading…</duckbook-front>
<duckbook-front-app>Loading…</duckbook-front-app>
</body>
</html>

87
package.json

@ -1,43 +1,48 @@
{
"name": "duck-booking-front",
"description": "Front-end for the Rubber Duck Booking Tool",
"repository": {
"type": "git",
"url": "https://github.com/gergelypolonkai/duckbook-front"
},
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/compiler-cli": "0.6.0",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.6",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.11",
"systemjs": "0.19.27",
"zone.js": "^0.6.17",
"angular2-in-memory-web-api": "0.0.18",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^1.8.10",
"typings": "^1.3.2"
}
"name": "duck-booking-front",
"description": "Front-end for the Rubber Duck Booking Tool",
"repository": {
"type": "git",
"url": "https://github.com/gergelypolonkai/duck-booking-tool-front"
},
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ng2-bootstrap": "^1.1.16",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
}

14
styles.css

@ -0,0 +1,14 @@
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}

74
systemjs.config.js

@ -1,43 +1,39 @@
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* System configuration for the Rubber Duck Booking Tool
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js"',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);

20
tsconfig.json

@ -1,12 +1,12 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}

7
typings.json

@ -1,7 +0,0 @@
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160831021119"
}
}
Loading…
Cancel
Save