diff --git a/angular.json b/angular.json index ee7803d067e3bceac67618009007b64d2f175c5a..c93c95e31a91eefb47eb8da1ba28b59343bf0723 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 f860449b87a35c5dbcae711c6d69042ab646af5b..65d642db5ba728dbe0df8e417c5b3ae34ffcde50 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 d5d8c3638c40ee824b45cd9fddc99359cf6b328d..1a004943458beff181e96d390bbc4912faedd60c 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 fa2706a406ba65e05f8e23003ce6e9df291fa146..3269585b4c72c3b0d5a225a23dcb783a006d9a59 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 7b0f67283151427327b47fed20bcea1ea943cf2f..6338a63ee9e4ce23745fc241ba0731567fe70630 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 f65716351aa5930fea545e1e3f016e2980c1f483..36e7983a1e96d5b934fc0dcd4502b6f3b1c41300 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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..72e76d048056f81def09a45d6dcc1d99fa93a662 --- /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 0000000000000000000000000000000000000000..5e34497bec9c7af8555fcd253a91492875a0784c --- /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 0000000000000000000000000000000000000000..948cd11d5b3825def6820a918444585614dbbab1 --- /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 0000000000000000000000000000000000000000..e3eac516daa5099425350994debadc545124922d --- /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 0000000000000000000000000000000000000000..e84c2fd2b095e220dd72de2b2a25953debef7dfd --- /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 90d4ee0072ce3fc41812f8af910219f9eea3c3de..c2be593623fb3565cc2e8e25462166116e7e7356 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; +}