build(aio): change examples to CLI (#19248)

PR Close #19248

aio/content/examples/component-interaction/src/app/app.component.html

@@ -9,43 +9,43 @@
 <a href="#bidirectional-service">Parent and children communicate via a service ("Mission Control")</a><br/>
 
 <div id="parent-to-child">
-  <hero-parent></hero-parent>
+  <app-hero-parent></app-hero-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 
 <hr>
 <div id="parent-to-child-setter">
-  <name-parent></name-parent>
+  <app-name-parent></app-name-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 
 <hr>
 <div id="parent-to-child-on-changes">
-  <version-parent></version-parent>
+  <app-version-parent></app-version-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 
 <hr>
 <div id="child-to-parent">
-  <vote-taker></vote-taker>
+  <app-vote-taker></app-vote-taker>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>
 
 <div id="parent-to-child-local-var">
-  <countdown-parent-lv></countdown-parent-lv>
+  <app-countdown-parent-lv></app-countdown-parent-lv>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>
 
 <div id="parent-to-view-child">
-  <countdown-parent-vc></countdown-parent-vc>
+  <app-countdown-parent-vc></app-countdown-parent-vc>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>
 
 <div id="bidirectional-service">
-  <mission-control></mission-control>
+  <app-mission-control></app-mission-control>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>

aio/content/examples/component-interaction/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }

aio/content/examples/component-interaction/src/app/astronaut.component.ts

@@ -5,7 +5,7 @@ import { MissionService } from './mission.service';
 import { Subscription }   from 'rxjs/Subscription';
 
 @Component({
-  selector: 'my-astronaut',
+  selector: 'app-astronaut',
   template: `
     <p>
       {{astronaut}}: <strong>{{mission}}</strong>

aio/content/examples/component-interaction/src/app/countdown-parent.component.ts

@@ -11,15 +11,15 @@ import { CountdownTimerComponent }  from './countdown-timer.component';
 //// Local variable, #timer, version
 // #docregion lv
 @Component({
-  selector: 'countdown-parent-lv',
+  selector: 'app-countdown-parent-lv',
   template: `
   <h3>Countdown to Liftoff (via local variable)</h3>
   <button (click)="timer.start()">Start</button>
   <button (click)="timer.stop()">Stop</button>
   <div class="seconds">{{timer.seconds}}</div>
-  <countdown-timer #timer></countdown-timer>
+  <app-countdown-timer #timer></app-countdown-timer>
   `,
-  styleUrls: ['demo.css']
+  styleUrls: ['../assets/demo.css']
 })
 export class CountdownLocalVarParentComponent { }
 // #enddocregion lv
@@ -27,15 +27,15 @@ export class CountdownLocalVarParentComponent { }
 //// View Child version
 // #docregion vc
 @Component({
-  selector: 'countdown-parent-vc',
+  selector: 'app-countdown-parent-vc',
   template: `
   <h3>Countdown to Liftoff (via ViewChild)</h3>
   <button (click)="start()">Start</button>
   <button (click)="stop()">Stop</button>
   <div class="seconds">{{ seconds() }}</div>
-  <countdown-timer></countdown-timer>
+  <app-countdown-timer></app-countdown-timer>
   `,
-  styleUrls: ['demo.css']
+  styleUrls: ['../assets/demo.css']
 })
 export class CountdownViewChildParentComponent implements AfterViewInit {
 

aio/content/examples/component-interaction/src/app/countdown-timer.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'countdown-timer',
+  selector: 'app-countdown-timer',
   template: '<p>{{message}}</p>'
 })
 export class CountdownTimerComponent implements OnInit, OnDestroy {

aio/content/examples/component-interaction/src/app/hero-child.component.ts

@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'hero-child',
+  selector: 'app-hero-child',
   template: `
     <h3>{{hero.name}} says:</h3>
     <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>

aio/content/examples/component-interaction/src/app/hero-parent.component.ts

@@ -4,13 +4,13 @@ import { Component } from '@angular/core';
 import { HEROES } from './hero';
 
 @Component({
-  selector: 'hero-parent',
+  selector: 'app-hero-parent',
   template: `
     <h2>{{master}} controls {{heroes.length}} heroes</h2>
-    <hero-child *ngFor="let hero of heroes"
+    <app-hero-child *ngFor="let hero of heroes"
       [hero]="hero"
       [master]="master">
-    </hero-child>
+    </app-hero-child>
   `
 })
 export class HeroParentComponent {

aio/content/examples/component-interaction/src/app/missioncontrol.component.ts

@@ -4,13 +4,13 @@ import { Component }          from '@angular/core';
 import { MissionService }     from './mission.service';
 
 @Component({
-  selector: 'mission-control',
+  selector: 'app-mission-control',
   template: `
     <h2>Mission Control</h2>
     <button (click)="announce()">Announce mission</button>
-    <my-astronaut *ngFor="let astronaut of astronauts"
+    <app-astronaut *ngFor="let astronaut of astronauts"
       [astronaut]="astronaut">
-    </my-astronaut>
+    </app-astronaut>
     <h3>History</h3>
     <ul>
       <li *ngFor="let event of history">{{event}}</li>

aio/content/examples/component-interaction/src/app/name-child.component.ts

@@ -2,7 +2,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'name-child',
+  selector: 'app-name-child',
   template: '<h3>"{{name}}"</h3>'
 })
 export class NameChildComponent {

aio/content/examples/component-interaction/src/app/name-parent.component.ts

@@ -2,10 +2,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'name-parent',
+  selector: 'app-name-parent',
   template: `
   <h2>Master controls {{names.length}} names</h2>
-  <name-child *ngFor="let name of names" [name]="name"></name-child>
+  <app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
   `
 })
 export class NameParentComponent {

aio/content/examples/component-interaction/src/app/version-child.component.ts

@@ -3,7 +3,7 @@
 import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
 
 @Component({
-  selector: 'version-child',
+  selector: 'app-version-child',
   template: `
     <h3>Version {{major}}.{{minor}}</h3>
     <h4>Change log:</h4>

aio/content/examples/component-interaction/src/app/version-parent.component.ts

@@ -2,12 +2,12 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'version-parent',
+  selector: 'app-version-parent',
   template: `
     <h2>Source code version</h2>
     <button (click)="newMinor()">New minor version</button>
     <button (click)="newMajor()">New major version</button>
-    <version-child [major]="major" [minor]="minor"></version-child>
+    <app-version-child [major]="major" [minor]="minor"></app-version-child>
   `
 })
 export class VersionParentComponent {

aio/content/examples/component-interaction/src/app/voter.component.ts

@@ -2,7 +2,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'my-voter',
+  selector: 'app-voter',
   template: `
     <h4>{{name}}</h4>
     <button (click)="vote(true)"  [disabled]="voted">Agree</button>

aio/content/examples/component-interaction/src/app/votetaker.component.ts

@@ -2,14 +2,14 @@
 import { Component }      from '@angular/core';
 
 @Component({
-  selector: 'vote-taker',
+  selector: 'app-vote-taker',
   template: `
     <h2>Should mankind colonize the Universe?</h2>
     <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
-    <my-voter *ngFor="let voter of voters"
+    <app-voter *ngFor="let voter of voters"
       [name]="voter"
       (onVoted)="onVoted($event)">
-    </my-voter>
+    </app-voter>
   `
 })
 export class VoteTakerComponent {

aio/content/examples/component-interaction/src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Passing information from parent to child</title>
@@ -7,23 +7,10 @@
     <style>
       .to-top {margin-top: 8px; display: block;}
     </style>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="demo.css">
-
-    <!-- Polyfills -->
-    <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/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>

aio/content/examples/component-interaction/src/main.ts

@@ -1,5 +1,11 @@
+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);