From be3edf435640079b3ae5c2ae7ec7e59a44042458 Mon Sep 17 00:00:00 2001
From: Helmut <Helmut.Hutzler @th-nuernberg.de>
Date: Mon, 16 Jul 2018 10:35:29 +0200
Subject: [PATCH] Initial Commit
---
angular.json | 5 ++--
package-lock.json | 5 ++++
package.json | 1 +
src/app/app.component.html | 20 ++-------------
src/app/app.component.ts | 2 +-
src/app/app.module.ts | 10 ++++++--
src/app/hero-detail/hero-detail.component.css | 0
.../hero-detail/hero-detail.component.html | 13 ++++++++++
.../hero-detail/hero-detail.component.spec.ts | 25 +++++++++++++++++++
src/app/hero-detail/hero-detail.component.ts | 16 ++++++++++++
src/app/hero.ts | 4 +++
src/app/mock-heroes.ts | 14 +++++++++++
src/styles.css | 22 ++++++++++++++++
13 files changed, 114 insertions(+), 23 deletions(-)
create mode 100644 src/app/hero-detail/hero-detail.component.css
create mode 100644 src/app/hero-detail/hero-detail.component.html
create mode 100644 src/app/hero-detail/hero-detail.component.spec.ts
create mode 100644 src/app/hero-detail/hero-detail.component.ts
create mode 100644 src/app/hero.ts
create mode 100644 src/app/mock-heroes.ts
diff --git a/angular.json b/angular.json
index ee7803d..c93c95e 100644
--- a/angular.json
+++ b/angular.json
@@ -23,7 +23,8 @@
"src/assets"
],
"styles": [
- "src/styles.css"
+ "src/styles.css",
+ "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": []
},
@@ -124,4 +125,4 @@
}
},
"defaultProject": "angular-tour-of-heroes"
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index f860449..65d642d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1409,6 +1409,11 @@
"hoek": "2.16.3"
}
},
+ "bootstrap": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.2.tgz",
+ "integrity": "sha512-3bP609EdMc/8EwgGp8KgpN8HwnR4V4lZ9CTi5pImMrXNxpkw7dK1B05aMwQWpG1ZWmTLlBSN/uzkuz5GsmQNFA=="
+ },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index d5d8c36..1a00494 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
+ "bootstrap": "^4.1.2",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fa2706a..3269585 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,4 @@
<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
- <h1>
- Welcome to {{ title }}!
- </h1>
- <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
- <li>
- <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
- </li>
- <li>
- <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
- </li>
- <li>
- <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
- </li>
-</ul>
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..6338a63 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css']
})
export class AppComponent {
- title = 'app';
+ title = 'Tour of Heros';
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..36e7983 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,13 +2,19 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { FormsModule } from '@angular/forms';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component'; // <-- NgModel lives here
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ HeroesComponent,
+ HeroDetailComponent
],
imports: [
- BrowserModule
+ BrowserModule,
+ FormsModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/hero-detail/hero-detail.component.css b/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/hero-detail/hero-detail.component.html b/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000..72e76d0
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,13 @@
+
+<div *ngIf="hero" class="container-fluid">
+
+ <h2>{{hero.name | uppercase}} Details</h2>
+ <div><span>id: </span>{{hero.id}}</div>
+ <div>
+ <label>name:
+ <input [(ngModel)]="hero.name" placeholder="name">
+ </label>
+ </div>
+
+</div>
+
diff --git a/src/app/hero-detail/hero-detail.component.spec.ts b/src/app/hero-detail/hero-detail.component.spec.ts
new file mode 100644
index 0000000..5e34497
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroDetailComponent } from './hero-detail.component';
+
+describe('HeroDetailComponent', () => {
+ let component: HeroDetailComponent;
+ let fixture: ComponentFixture<HeroDetailComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HeroDetailComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeroDetailComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/hero-detail/hero-detail.component.ts b/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000..948cd11
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+ selector: 'app-hero-detail',
+ templateUrl: './hero-detail.component.html',
+ styleUrls: ['./hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+ @Input() hero: Hero;
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/hero.ts b/src/app/hero.ts
new file mode 100644
index 0000000..e3eac51
--- /dev/null
+++ b/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+ id: number;
+ name: string;
+}
diff --git a/src/app/mock-heroes.ts b/src/app/mock-heroes.ts
new file mode 100644
index 0000000..e84c2fd
--- /dev/null
+++ b/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+ { id: 11, name: 'Mr. Nice' },
+ { id: 12, name: 'Narco' },
+ { 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' }
+];
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..c2be593 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,23 @@
/* You can add global styles to this file, and also import other style files */
+/* Application-wide 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;
+}
+body, input[text], button {
+ color: #888;
+ font-family: Cambria, Georgia;
+}
+/* everywhere else */
+* {
+ font-family: Arial, Helvetica, sans-serif;
+}
--
GitLab