
committed by
Igor Minar

parent
344a5ca545
commit
9bbf009dff
@ -2,11 +2,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<div class="container">
|
||||
<h1>Reactive Forms</h1>
|
||||
<hero-detail></hero-detail>
|
||||
<app-hero-detail></app-hero-detail>
|
||||
</div>`
|
||||
})
|
||||
export class AppComponent { }
|
||||
|
@ -2,11 +2,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<div class="container">
|
||||
<h1>Reactive Forms</h1>
|
||||
<hero-list></hero-list>
|
||||
<app-hero-list></app-hero-list>
|
||||
</div>`
|
||||
})
|
||||
export class AppComponent { }
|
||||
|
@ -9,12 +9,12 @@
|
||||
<hr>
|
||||
|
||||
<div class="demo">
|
||||
<hero-list *ngIf="demo===final"></hero-list>
|
||||
<hero-detail-1 *ngIf="demo===1"></hero-detail-1>
|
||||
<hero-detail-2 *ngIf="demo===2"></hero-detail-2>
|
||||
<hero-detail-3 *ngIf="demo===3"></hero-detail-3>
|
||||
<hero-detail-4 *ngIf="demo===4"></hero-detail-4>
|
||||
<hero-detail-5 *ngIf="demo===5"></hero-detail-5>
|
||||
<app-hero-list *ngIf="demo===final"></app-hero-list>
|
||||
<app-hero-detail-1 *ngIf="demo===1"></app-hero-detail-1>
|
||||
<app-hero-detail-2 *ngIf="demo===2"></app-hero-detail-2>
|
||||
<app-hero-detail-3 *ngIf="demo===3"></app-hero-detail-3>
|
||||
<app-hero-detail-4 *ngIf="demo===4"></app-hero-detail-4>
|
||||
<app-hero-detail-5 *ngIf="demo===5"></app-hero-detail-5>
|
||||
|
||||
<div *ngIf="demo >= 6 && demo !== final" >
|
||||
|
||||
@ -30,9 +30,9 @@
|
||||
<hr>
|
||||
<h2>Hero Detail</h2>
|
||||
<h3>Editing: {{selectedHero.name}}</h3>
|
||||
<hero-detail-6 [hero]=selectedHero *ngIf="demo===6"></hero-detail-6>
|
||||
<hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></hero-detail-7>
|
||||
<hero-detail-8 [hero]=selectedHero *ngIf="demo===8"></hero-detail-8>
|
||||
<app-hero-detail-6 [hero]=selectedHero *ngIf="demo===6"></app-hero-detail-6>
|
||||
<app-hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></app-hero-detail-7>
|
||||
<app-hero-detail-8 [hero]=selectedHero *ngIf="demo===8"></app-hero-detail-8>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
@ -6,7 +6,7 @@ import { Hero } from './data-model';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
templateUrl: './demo.component.html'
|
||||
})
|
||||
export class DemoComponent {
|
||||
|
@ -5,7 +5,7 @@ import { FormControl } from '@angular/forms';
|
||||
// #enddocregion
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-1',
|
||||
selector: 'app-hero-detail-1',
|
||||
templateUrl: './hero-detail-1.component.html'
|
||||
})
|
||||
// #docregion v1
|
||||
|
@ -5,7 +5,7 @@ import { FormControl, FormGroup } from '@angular/forms';
|
||||
// #enddocregion imports
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-2',
|
||||
selector: 'app-hero-detail-2',
|
||||
templateUrl: './hero-detail-2.component.html'
|
||||
})
|
||||
// #docregion v2
|
||||
|
@ -5,7 +5,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
// #enddocregion imports
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-3',
|
||||
selector: 'app-hero-detail-3',
|
||||
templateUrl: './hero-detail-3.component.html'
|
||||
})
|
||||
// #docregion v3
|
||||
|
@ -5,7 +5,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
// #enddocregion imports
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-3',
|
||||
selector: 'app-hero-detail-3',
|
||||
templateUrl: './hero-detail-3.component.html'
|
||||
})
|
||||
// #docregion v3a
|
||||
|
@ -7,7 +7,7 @@ import { states } from './data-model';
|
||||
// #enddocregion imports
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-4',
|
||||
selector: 'app-hero-detail-4',
|
||||
templateUrl: './hero-detail-4.component.html'
|
||||
})
|
||||
// #docregion v4
|
||||
|
@ -5,7 +5,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { states } from './data-model';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-5',
|
||||
selector: 'app-hero-detail-5',
|
||||
templateUrl: './hero-detail-5.component.html'
|
||||
})
|
||||
// #docregion v5
|
||||
|
@ -11,7 +11,7 @@ import { Hero, states } from './data-model';
|
||||
////////// 6 ////////////////////
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-6',
|
||||
selector: 'app-hero-detail-6',
|
||||
templateUrl: './hero-detail-5.component.html'
|
||||
})
|
||||
// #docregion v6
|
||||
|
@ -11,7 +11,7 @@ import { Address, Hero, states } from './data-model';
|
||||
// #enddocregion imports
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-7',
|
||||
selector: 'app-hero-detail-7',
|
||||
templateUrl: './hero-detail-5.component.html'
|
||||
})
|
||||
// #docregion v7
|
||||
|
@ -7,7 +7,7 @@ import { Address, Hero, states } from './data-model';
|
||||
// #enddocregion imports
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail-8',
|
||||
selector: 'app-hero-detail-8',
|
||||
templateUrl: './hero-detail-8.component.html'
|
||||
})
|
||||
// #docregion v8
|
||||
|
@ -10,7 +10,7 @@ import { HeroService } from './hero.service';
|
||||
|
||||
// #docregion metadata
|
||||
@Component({
|
||||
selector: 'hero-detail',
|
||||
selector: 'app-hero-detail',
|
||||
templateUrl: './hero-detail.component.html'
|
||||
})
|
||||
// #enddocregion metadata
|
||||
|
@ -4,5 +4,5 @@
|
||||
</nav>
|
||||
|
||||
<div *ngIf="selectedHero">
|
||||
<hero-detail [hero]="selectedHero"></hero-detail>
|
||||
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
|
||||
</div>
|
||||
|
@ -12,6 +12,6 @@
|
||||
<h2>Hero Detail</h2>
|
||||
<h3>Editing: {{selectedHero.name}}</h3>
|
||||
<!-- #docregion hero-binding -->
|
||||
<hero-detail [hero]="selectedHero"></hero-detail>
|
||||
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
|
||||
<!-- #enddocregion hero-binding -->
|
||||
</div>
|
||||
|
@ -7,7 +7,7 @@ import { Hero } from './data-model';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list',
|
||||
selector: 'app-hero-list',
|
||||
templateUrl: './hero-list.component.html'
|
||||
})
|
||||
export class HeroListComponent implements OnInit {
|
||||
|
@ -1,18 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- #docregion -->
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Hero Form</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- #docregion bootstrap -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
|
||||
<!-- #enddocregion bootstrap -->
|
||||
|
||||
<!-- Polyfills for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<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>
|
||||
@ -25,7 +23,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
@ -1,31 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- #docregion -->
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Hero Form</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- #docregion bootstrap -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
|
||||
<!-- #enddocregion bootstrap -->
|
||||
|
||||
<!-- Polyfills 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>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
@ -1,5 +1,13 @@
|
||||
// tslint:disable:no-unused-variable
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
@ -1,6 +1,13 @@
|
||||
// tslint:disable:no-unused-variable
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppModule } from './app/app.module'; // just the final version
|
||||
import { DemoModule } from './app/demo.module'; // demo picker
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(DemoModule); // (AppModule);
|
||||
import { AppModule } from './app/app.module'; // just the final version
|
||||
import { DemoModule } from './app/demo.module'; // demo picker
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(DemoModule);
|
||||
|
Reference in New Issue
Block a user