honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

PR Close #19248
This commit is contained in:
Jesus Rodriguez 2017-08-22 21:31:15 +02:00 committed by Igor Minar
parent 344a5ca545
commit 9bbf009dff
377 changed files with 2339 additions and 1748 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
aio/content/examples/.gitignore vendored
View File

@ -1,8 +1,22 @@
# boilerplate files # boilerplate files
**/src/environments/environment.prod.ts
**/src/environments/environment.ts
**/src/assets/.gitkeep
**/src/styles.css **/src/styles.css
**/src/systemjs-angular-loader.js **/src/systemjs-angular-loader.js
**/src/systemjs.config.js **/src/systemjs.config.js
**/src/tsconfig.json **/src/tsconfig.json
**/src/favicon.ico
**/src/polyfills.ts
**/src/test.ts
**/src/tsconfig.app.json
**/src/tsconfig.spec.json
**/src/typings.d.ts
**/e2e/app.po.ts
**/e2e/tsconfig.e2e.json
**/.angular-cli.json
**/.editorconfig
**/tsconfig.json
**/bs-config.e2e.json **/bs-config.e2e.json
**/bs-config.json **/bs-config.json
**/package.json **/package.json
@ -53,14 +67,18 @@ dist/
# testing # testing
!testing/src/browser-test-shim.js !testing/src/browser-test-shim.js
!testing/karma*.js
# webpack # webpack
!webpack/**/config/*.js !webpack/**/config/*.js
!webpack/**/*webpack*.js !webpack/**/*webpack*.js
!webpack/src/polyfills.ts
# styleguide # styleguide
!styleguide/src/systemjs.custom.js !styleguide/src/systemjs.custom.js
# plunkers # plunkers
*plnkr.no-link.html *plnkr.no-link.html
# ngUpgrade testing
!upgrade-phonecat-*/**/karma.conf.js
!upgrade-phonecat-*/**/karma-test-shim.js

6
aio/content/examples/ajs-quick-reference/e2e-spec.ts → aio/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts
View File

@ -83,7 +83,7 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
} }
function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) { function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
let posterButton = element(by.css('movie-list tr > th > button')); let posterButton = element(by.css('app-movie-list tr > th > button'));
expect(posterButton.getText()).toBe(expectedButtonText); expect(posterButton.getText()).toBe(expectedButtonText);
posterButton.click().then(function () { posterButton.click().then(function () {
@ -92,11 +92,11 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
} }
function getMovieRows() { function getMovieRows() {
return element.all(by.css('movie-list tbody > tr')); return element.all(by.css('app-movie-list tbody > tr'));
} }
function testFavoriteHero(heroName: string, expectedLabel: string) { function testFavoriteHero(heroName: string, expectedLabel: string) {
let movieListComp = element(by.tagName('movie-list')); let movieListComp = element(by.tagName('app-movie-list'));
let heroInput = movieListComp.element(by.tagName('input')); let heroInput = movieListComp.element(by.tagName('input'));
let favoriteHeroLabel = movieListComp.element(by.tagName('h3')); let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
let resultLabel = movieListComp.element(by.css('span > p')); let resultLabel = movieListComp.element(by.css('span > p'));

2
aio/content/examples/ajs-quick-reference/src/app/app.component.ts
View File

@ -4,7 +4,7 @@ import { MovieService } from './movie.service';
import { IMovie } from './movie'; import { IMovie } from './movie';
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ], styleUrls: [ './app.component.css' ],
providers: [ MovieService ] providers: [ MovieService ]

2
aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
View File

@ -8,7 +8,7 @@ import { MovieService } from './movie.service';
// #docregion component // #docregion component
@Component({ @Component({
selector: 'movie-list', selector: 'app-movie-list',
templateUrl: './movie-list.component.html', templateUrl: './movie-list.component.html',
// #docregion style-url // #docregion style-url
styleUrls: [ './movie-list.component.css' ], styleUrls: [ './movie-list.component.css' ],

6
aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
View File

@ -8,7 +8,7 @@ export class MovieService {
return [ return [
{ {
hero: 'Celeritas', hero: 'Celeritas',
imageurl: 'images/hero.png', imageurl: 'assets/images/hero.png',
movieId: 1, movieId: 1,
mpaa: 'pg-13', mpaa: 'pg-13',
releaseDate: '2015-12-19T00:00:00', releaseDate: '2015-12-19T00:00:00',
@ -19,7 +19,7 @@ export class MovieService {
}, },
{ {
hero: 'Mr. Nice', hero: 'Mr. Nice',
imageurl: 'images/villain.png', imageurl: 'assets/images/villain.png',
movieId: 2, movieId: 2,
mpaa: 'pg-13', mpaa: 'pg-13',
releaseDate: '2015-12-18T00:00:00', releaseDate: '2015-12-18T00:00:00',
@ -30,7 +30,7 @@ export class MovieService {
}, },
{ {
hero: 'Angular', hero: 'Angular',
imageurl: 'images/ng-logo.png', imageurl: 'assets/images/ng-logo.png',
movieId: 3, movieId: 3,
mpaa: 'pg-13', mpaa: 'pg-13',
releaseDate: '2015-12-17T00:00:00', releaseDate: '2015-12-17T00:00:00',

0
aio/content/examples/ajs-quick-reference/src/images/hero.png → aio/content/examples/ajs-quick-reference/src/assets/images/hero.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

0
aio/content/examples/ajs-quick-reference/src/images/ng-logo.png → aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

0
aio/content/examples/ajs-quick-reference/src/images/villain.png → aio/content/examples/ajs-quick-reference/src/assets/images/villain.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

15
aio/content/examples/ajs-quick-reference/src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<base href="/"> <base href="/">
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -8,21 +8,10 @@
<!-- #docregion style --> <!-- #docregion style -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<!-- #enddocregion style --> <!-- #enddocregion style -->
<!-- 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> </head>
<body> <body>
<my-app>Loading app...</my-app> <app-root></app-root>
</body> </body>
</html> </html>

7
aio/content/examples/ajs-quick-reference/src/main.ts
View File

@ -1,5 +1,12 @@
// #docregion // #docregion
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

22
aio/content/examples/animations/e2e-spec.ts → aio/content/examples/animations/e2e/app.e2e-spec.ts
View File

@ -29,7 +29,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-basic')); host = element(by.css('app-hero-list-basic'));
}); });
it('animates between active and inactive', () => { it('animates between active and inactive', () => {
@ -58,7 +58,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(function() { beforeEach(function() {
host = element(by.css('hero-list-inline-styles')); host = element(by.css('app-hero-list-inline-styles'));
}); });
it('are not kept after animation', () => { it('are not kept after animation', () => {
@ -79,7 +79,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-combined-transitions')); host = element(by.css('app-hero-list-combined-transitions'));
}); });
it('animates between active and inactive', () => { it('animates between active and inactive', () => {
@ -108,7 +108,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-twoway')); host = element(by.css('app-hero-list-twoway'));
}); });
it('animates between active and inactive', () => { it('animates between active and inactive', () => {
@ -137,7 +137,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-enter-leave')); host = element(by.css('app-hero-list-enter-leave'));
}); });
it('adds and removes element', () => { it('adds and removes element', () => {
@ -157,7 +157,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(function() { beforeEach(function() {
host = element(by.css('hero-list-enter-leave-states')); host = element(by.css('app-hero-list-enter-leave-states'));
}); });
it('adds and removes and animates between active and inactive', () => { it('adds and removes and animates between active and inactive', () => {
@ -186,7 +186,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(function() { beforeEach(function() {
host = element(by.css('hero-list-auto')); host = element(by.css('app-hero-list-auto'));
}); });
it('adds and removes element', () => { it('adds and removes element', () => {
@ -206,7 +206,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-timings')); host = element(by.css('app-hero-list-timings'));
}); });
it('adds and removes element', () => { it('adds and removes element', () => {
@ -227,7 +227,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-multistep')); host = element(by.css('app-hero-list-multistep'));
}); });
it('adds and removes element', () => { it('adds and removes element', () => {
@ -248,7 +248,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-groups')); host = element(by.css('app-hero-list-groups'));
}); });
it('adds and removes element', () => { it('adds and removes element', () => {
@ -269,7 +269,7 @@ describe('Animation Tests', () => {
let host: ElementFinder; let host: ElementFinder;
beforeEach(() => { beforeEach(() => {
host = element(by.css('hero-list-basic')); host = element(by.css('app-hero-list-basic'));
}); });
it('animates between active and inactive', () => { it('animates between active and inactive', () => {

2
aio/content/examples/animations/src/app/hero-list-auto.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-auto', selector: 'app-hero-list-auto',
// #docregion template // #docregion template
template: ` template: `
<ul> <ul>

2
aio/content/examples/animations/src/app/hero-list-basic.component.ts
View File

@ -17,7 +17,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-basic', selector: 'app-hero-list-basic',
// #enddocregion // #enddocregion
/* The click event calls hero.toggleState(), which /* The click event calls hero.toggleState(), which
* causes the state of that hero to switch from * causes the state of that hero to switch from

2
aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
View File

@ -16,7 +16,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-combined-transitions', selector: 'app-hero-list-combined-transitions',
// #docregion template // #docregion template
template: ` template: `
<ul> <ul>

2
aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-enter-leave-states', selector: 'app-hero-list-enter-leave-states',
// #docregion template // #docregion template
template: ` template: `
<ul> <ul>

2
aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-enter-leave', selector: 'app-hero-list-enter-leave',
// #docregion template // #docregion template
template: ` template: `
<ul> <ul>

2
aio/content/examples/animations/src/app/hero-list-groups.component.ts
View File

@ -14,7 +14,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-groups', selector: 'app-hero-list-groups',
template: ` template: `
<ul> <ul>
<li *ngFor="let hero of heroes" <li *ngFor="let hero of heroes"

2
aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
View File

@ -15,7 +15,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-inline-styles', selector: 'app-hero-list-inline-styles',
// #docregion template // #docregion template
template: ` template: `
<ul> <ul>

2
aio/content/examples/animations/src/app/hero-list-multistep.component.ts
View File

@ -15,7 +15,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-multistep', selector: 'app-hero-list-multistep',
// #docregion template // #docregion template
template: ` template: `
<ul> <ul>

2
aio/content/examples/animations/src/app/hero-list-timings.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-timings', selector: 'app-hero-list-timings',
template: ` template: `
<ul> <ul>
<li *ngFor="let hero of heroes" <li *ngFor="let hero of heroes"

2
aio/content/examples/animations/src/app/hero-list-twoway.component.ts
View File

@ -16,7 +16,7 @@ import {
import { Hero } from './hero.service'; import { Hero } from './hero.service';
@Component({ @Component({
selector: 'hero-list-twoway', selector: 'app-hero-list-twoway',
// #docregion template // #docregion template
template: ` template: `
<ul> <ul>

24
aio/content/examples/animations/src/app/hero-team-builder.component.ts
View File

@ -3,7 +3,7 @@ import { Component } from '@angular/core';
import { Hero, HeroService } from './hero.service'; import { Hero, HeroService } from './hero.service';
@Component({ @Component({
selector: 'hero-team-builder', selector: 'app-root',
template: ` template: `
<div class="buttons"> <div class="buttons">
<button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button> <button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
@ -15,27 +15,27 @@ import { Hero, HeroService } from './hero.service';
<div class="column"> <div class="column">
<h4>Basic State</h4> <h4>Basic State</h4>
<p>Switch between active/inactive on click.</p> <p>Switch between active/inactive on click.</p>
<hero-list-basic [heroes]="heroes"></hero-list-basic> <app-hero-list-basic [heroes]="heroes"></app-hero-list-basic>
</div> </div>
<div class="column"> <div class="column">
<h4>Styles inline in transitions</h4> <h4>Styles inline in transitions</h4>
<p>Animated effect on click, no persistent end styles.</p> <p>Animated effect on click, no persistend end styles.</p>
<hero-list-inline-styles [heroes]="heroes"></hero-list-inline-styles> <app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
</div> </div>
<div class="column"> <div class="column">
<h4>Combined transition syntax</h4> <h4>Combined transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions.</p> <p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
<hero-list-combined-transitions [heroes]="heroes"></hero-list-combined-transitions> <app-hero-list-combined-transitions [heroes]="heroes"></app-hero-list-combined-transitions>
</div> </div>
<div class="column"> <div class="column">
<h4>Two-way transition syntax</h4> <h4>Two-way transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p> <p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
<hero-list-twoway [heroes]="heroes"></hero-list-twoway> <app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
</div> </div>
<div class="column"> <div class="column">
<h4>Enter & Leave</h4> <h4>Enter & Leave</h4>
<p>Enter and leave animations using the void state.</p> <p>Enter and leave animations using the void state.</p>
<hero-list-enter-leave [heroes]="heroes"></hero-list-enter-leave> <app-hero-list-enter-leave [heroes]="heroes"></app-hero-list-enter-leave>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
@ -45,27 +45,27 @@ import { Hero, HeroService } from './hero.service';
Enter and leave animations combined with active/inactive state animations. Enter and leave animations combined with active/inactive state animations.
Different enter and leave transitions depending on state. Different enter and leave transitions depending on state.
</p> </p>
<hero-list-enter-leave-states [heroes]="heroes"></hero-list-enter-leave-states> <app-hero-list-enter-leave-states [heroes]="heroes"></app-hero-list-enter-leave-states>
</div> </div>
<div class="column"> <div class="column">
<h4>Auto Style Calc</h4> <h4>Auto Style Calc</h4>
<p>Leave animation from the current computed height using the auto-style value *.</p> <p>Leave animation from the current computed height using the auto-style value *.</p>
<hero-list-auto [heroes]="heroes"></hero-list-auto> <app-hero-list-auto [heroes]="heroes"></app-hero-list-auto>
</div> </div>
<div class="column"> <div class="column">
<h4>Different Timings</h4> <h4>Different Timings</h4>
<p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p> <p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
<hero-list-timings [heroes]="heroes"></hero-list-timings> <app-hero-list-timings [heroes]="heroes"></app-hero-list-timings>
</div> </div>
<div class="column"> <div class="column">
<h4>Multiple Keyframes</h4> <h4>Multiple Keyframes</h4>
<p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p> <p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
<hero-list-multistep [heroes]="heroes"></hero-list-multistep> <app-hero-list-multistep [heroes]="heroes"></app-hero-list-multistep>
</div> </div>
<div class="column"> <div class="column">
<h4>Parallel Groups</h4> <h4>Parallel Groups</h4>
<p>Enter and leave animations with multiple properties animated in parallel with different timings.</p> <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
<hero-list-groups [heroes]="heroes"></hero-list-groups> <app-hero-list-groups [heroes]="heroes"></app-hero-list-groups>
</div> </div>
</div> </div>
`, `,

14
aio/content/examples/animations/src/index.html
View File

@ -5,26 +5,14 @@
<title>Animations</title> <title>Animations</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill for Web Animations --> <!-- Polyfill for Web Animations -->
<script src="https://unpkg.com/web-animations-js@2.2.1"></script> <script src="https://unpkg.com/web-animations-js@2.2.1"></script>
<!-- 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> </head>
<body> <body>
<h1 style="visibility: hidden;">External H1 Title for E2E test</h1> <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
<hero-team-builder></hero-team-builder> <app-root></app-root>
<button style="visibility: hidden;">External button for E2E test</button> <button style="visibility: hidden;">External button for E2E test</button>
<ul style="visibility: hidden;"> <ul style="visibility: hidden;">
<li>External list for E2E test</li> <li>External list for E2E test</li>

7
aio/content/examples/animations/src/main.ts
View File

@ -1,4 +1,11 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

3
aio/content/examples/aot-compiler/example-config.json
View File

@ -1,3 +1,4 @@
{ {
"build": "build:aot" "build": "build:aot",
"projectType": "systemjs"
} }

2
aio/content/examples/aot-compiler/src/index-jit.html
View File

@ -1,6 +1,6 @@
<!-- #docregion --> <!-- #docregion -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Ahead of time compilation (JIT)</title> <title>Ahead of time compilation (JIT)</title>
<base href="/"> <base href="/">

2
aio/content/examples/aot-compiler/src/index.html
View File

@ -1,6 +1,6 @@
<!-- #docregion --> <!-- #docregion -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Ahead of time compilation</title> <title>Ahead of time compilation</title>
<base href="/"> <base href="/">

8
aio/content/examples/architecture/e2e-spec.ts → aio/content/examples/architecture/e2e/app.e2e-spec.ts
View File

@ -79,10 +79,10 @@ function salesTaxTests() {
function getPageElts() { function getPageElts() {
return { return {
heroes: element.all(by.css('my-app li')), heroes: element.all(by.css('app-root li')),
heroDetail: element(by.css('my-app hero-detail')), heroDetail: element(by.css('app-root app-hero-detail')),
salesTaxAmountInput: element(by.css('my-app sales-tax input')), salesTaxAmountInput: element(by.css('app-root app-sales-tax input')),
salesTaxDetail: element(by.css('my-app sales-tax div')) salesTaxDetail: element(by.css('app-root app-sales-tax div'))
}; };
} }

6
aio/content/examples/architecture/src/app/app.component.ts
View File

@ -3,10 +3,10 @@ import { Component } from '@angular/core';
// #enddocregion import // #enddocregion import
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
template: ` template: `
<hero-list></hero-list> <app-hero-list></app-hero-list>
<sales-tax></sales-tax> <app-sales-tax></app-sales-tax>
` `
}) })
// #docregion export // #docregion export

2
aio/content/examples/architecture/src/app/hero-detail.component.ts
View File

@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
import { Hero } from './hero'; import { Hero } from './hero';
@Component({ @Component({
selector: 'hero-detail', selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html' templateUrl: './hero-detail.component.html'
}) })
export class HeroDetailComponent { export class HeroDetailComponent {

4
aio/content/examples/architecture/src/app/hero-list.component.1.html
View File

@ -1,9 +1,9 @@
<!--#docregion binding --> <!--#docregion binding -->
<li>{{hero.name}}</li> <li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail> <app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li> <li (click)="selectHero(hero)"></li>
<!--#enddocregion binding --> <!--#enddocregion binding -->
<!--#docregion structural --> <!--#docregion structural -->
<li *ngFor="let hero of heroes"></li> <li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail> <app-hero-detail *ngIf="selectedHero"></app-hero-detail>

2
aio/content/examples/architecture/src/app/hero-list.component.html
View File

@ -8,4 +8,4 @@
</li> </li>
</ul> </ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail> <app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

2
aio/content/examples/architecture/src/app/hero-list.component.ts
View File

@ -5,7 +5,7 @@ import { HeroService } from './hero.service';
// #docregion metadata, providers // #docregion metadata, providers
@Component({ @Component({
selector: 'hero-list', selector: 'app-hero-list',
templateUrl: './hero-list.component.html', templateUrl: './hero-list.component.html',
providers: [ HeroService ] providers: [ HeroService ]
}) })

2
aio/content/examples/architecture/src/app/sales-tax.component.ts
View File

@ -4,7 +4,7 @@ import { SalesTaxService } from './sales-tax.service';
import { TaxRateService } from './tax-rate.service'; import { TaxRateService } from './tax-rate.service';
@Component({ @Component({
selector: 'sales-tax', selector: 'app-sales-tax',
template: ` template: `
<h2>Sales Tax Calculator</h2> <h2>Sales Tax Calculator</h2>
Amount: <input #amountBox (change)="0"> Amount: <input #amountBox (change)="0">

17
aio/content/examples/architecture/src/index.html
View File

@ -1,26 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Architecture of Angular</title> <title>Architecture of Angular</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/"> <base href="/">
<link rel="stylesheet" href="styles.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> <body>
<my-app>Loading...</my-app> <app-root></app-root>
</body> </body>
</html> </html>

7
aio/content/examples/architecture/src/main.ts
View File

@ -1,5 +1,12 @@
// #docregion // #docregion
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

0
aio/content/examples/attribute-directives/e2e-spec.ts → aio/content/examples/attribute-directives/e2e/app.e2e-spec.ts
View File

8
aio/content/examples/attribute-directives/src/app/app.component.1.html
View File

@ -1,14 +1,14 @@
<!-- #docregion --> <!-- #docregion -->
<h1>My First Attribute Directive</h1> <h1>My First Attribute Directive</h1>
<!-- #docregion applied --> <!-- #docregion applied -->
<p myHighlight>Highlight me!</p> <p appHightlight>Highlight me!</p>
<!-- #enddocregion applied, --> <!-- #enddocregion applied, -->
<!-- #docregion color-1 --> <!-- #docregion color-1 -->
<p myHighlight highlightColor="yellow">Highlighted in yellow</p> <p appHightlight highlightColor="yellow">Highlighted in yellow</p>
<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p> <p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>
<!-- #enddocregion color-1 --> <!-- #enddocregion color-1 -->
<!-- #docregion color-2 --> <!-- #docregion color-2 -->
<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p> <p appHightlight [highlightColor]="color">Highlighted with parent component's color</p>
<!-- #enddocregion color-2 --> <!-- #enddocregion color-2 -->

2
aio/content/examples/attribute-directives/src/app/app.component.1.ts
View File

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

8
aio/content/examples/attribute-directives/src/app/app.component.html
View File

@ -8,11 +8,11 @@
<input type="radio" name="colors" (click)="color='cyan'">Cyan <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div> </div>
<!-- #docregion color --> <!-- #docregion color -->
<p [myHighlight]="color">Highlight me!</p> <p [appHighlight]="color">Highlight me!</p>
<!-- #enddocregion color, v2 --> <!-- #enddocregion color, v2 -->
<!-- #docregion defaultColor --> <!-- #docregion defaultColor -->
<p [myHighlight]="color" defaultColor="violet"> <p [appHighlight]="color" defaultColor="violet">
Highlight me too! Highlight me too!
</p> </p>
<!-- #enddocregion defaultColor, --> <!-- #enddocregion defaultColor, -->
@ -20,5 +20,5 @@
<hr> <hr>
<p><i>Mouse over the following lines to see fixed highlights</i></p> <p><i>Mouse over the following lines to see fixed highlights</i></p>
<p [myHighlight]="'yellow'">Highlighted in yellow</p> <p [appHighlight]="'yellow'">Highlighted in yellow</p>
<p myHighlight="orange">Highlighted in orange</p> <p appHighlight="orange">Highlighted in orange</p>

2
aio/content/examples/attribute-directives/src/app/app.component.ts
View File

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

2
aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
View File

@ -2,7 +2,7 @@
// #docregion // #docregion
import { Directive, ElementRef, Input } from '@angular/core'; import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' }) @Directive({ selector: '[appHighlight]' })
export class HighlightDirective { export class HighlightDirective {
constructor(el: ElementRef) { constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow'; el.nativeElement.style.backgroundColor = 'yellow';

2
aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
View File

@ -4,7 +4,7 @@
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({ @Directive({
selector: '[myHighlight]' selector: '[appHighlight]'
}) })
export class HighlightDirective { export class HighlightDirective {
// #docregion ctor // #docregion ctor

4
aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
View File

@ -3,13 +3,13 @@
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({ @Directive({
selector: '[myHighlight]' selector: '[appHighlight]'
}) })
export class HighlightDirective { export class HighlightDirective {
constructor(private el: ElementRef) { } constructor(private el: ElementRef) { }
@Input('myHighlight') highlightColor: string; @Input('appHighlight') highlightColor: string;
// #docregion mouse-enter // #docregion mouse-enter
@HostListener('mouseenter') onMouseEnter() { @HostListener('mouseenter') onMouseEnter() {

4
aio/content/examples/attribute-directives/src/app/highlight.directive.ts
View File

@ -4,7 +4,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
// #enddocregion imports // #enddocregion imports
@Directive({ @Directive({
selector: '[myHighlight]' selector: '[appHighlight]'
}) })
export class HighlightDirective { export class HighlightDirective {
@ -15,7 +15,7 @@ export class HighlightDirective {
// #enddocregion defaultColor // #enddocregion defaultColor
// #docregion color // #docregion color
@Input('myHighlight') highlightColor: string; @Input('appHighlight') highlightColor: string;
// #enddocregion color // #enddocregion color
// #docregion mouse-enter // #docregion mouse-enter

16
aio/content/examples/attribute-directives/src/index.html
View File

@ -1,25 +1,13 @@
<!-- #docregion --> <!-- #docregion -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Attribute Directives</title> <title>Attribute Directives</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.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> </head>
<body> <body>
<my-app>loading...</my-app> <app-root></app-root>
</body> </body>
</html> </html>

7
aio/content/examples/attribute-directives/src/main.ts
View File

@ -1,5 +1,12 @@
// #docregion // #docregion
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

14
aio/content/examples/cli-quickstart/e2e-spec.ts
View File

@ -1,14 +0,0 @@
'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
describe('cli-quickstart App', () => {
beforeEach(() => {
return browser.get('/');
});
it('should display message saying app works', () => {
let pageTitle = element(by.css('app-root h1')).getText();
expect(pageTitle).toEqual('Welcome to My First Angular App!!');
});
});

12
aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts
View File

@ -1,14 +1,14 @@
import { MyAppPage } from './app.po'; 'use strict'; // necessary for es6 output in node
describe('my-app App', function() { import { browser, element, by } from 'protractor';
let page: MyAppPage;
describe('cli-quickstart App', () => {
beforeEach(() => { beforeEach(() => {
page = new MyAppPage(); return browser.get('/');
}); });
it('should display message saying app works', () => { it('should display message saying app works', () => {
page.navigateTo(); let pageTitle = element(by.css('app-root h1')).getText();
expect(page.getParagraphText()).toEqual('Welcome to app!!'); expect(pageTitle).toEqual('Welcome to My First Angular App!!');
}); });
}); });

4
aio/content/examples/cli-quickstart/zipper.json
View File

@ -5,7 +5,5 @@
"!**/*.[0-9].*", "!**/*.[0-9].*",
".angular-cli.json", ".angular-cli.json",
"protractor.conf.js" "protractor.conf.js"
], ]
"removeSystemJsConfig": true,
"type": "cli"
} }

36
aio/content/examples/component-interaction/e2e-spec.ts → aio/content/examples/component-interaction/e2e/app.e2e-spec.ts
View File

@ -17,8 +17,8 @@ describe('Component Communication Cookbook Tests', function () {
let _masterName = 'Master'; let _masterName = 'Master';
it('should pass properties to children properly', function () { it('should pass properties to children properly', function () {
let parent = element.all(by.tagName('hero-parent')).get(0); let parent = element.all(by.tagName('app-hero-parent')).get(0);
let heroes = parent.all(by.tagName('hero-child')); let heroes = parent.all(by.tagName('app-hero-child'));
for (let i = 0; i < _heroNames.length; i++) { for (let i = 0; i < _heroNames.length; i++) {
let childTitle = heroes.get(i).element(by.tagName('h3')).getText(); let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
@ -37,8 +37,8 @@ describe('Component Communication Cookbook Tests', function () {
it('should display trimmed, non-empty names', function () { it('should display trimmed, non-empty names', function () {
let _nonEmptyNameIndex = 0; let _nonEmptyNameIndex = 0;
let _nonEmptyName = '"Mr. IQ"'; let _nonEmptyName = '"Mr. IQ"';
let parent = element.all(by.tagName('name-parent')).get(0); let parent = element.all(by.tagName('app-name-parent')).get(0);
let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex); let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
let displayName = hero.element(by.tagName('h3')).getText(); let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_nonEmptyName); expect(displayName).toEqual(_nonEmptyName);
@ -47,8 +47,8 @@ describe('Component Communication Cookbook Tests', function () {
it('should replace empty name with default name', function () { it('should replace empty name with default name', function () {
let _emptyNameIndex = 1; let _emptyNameIndex = 1;
let _defaultName = '"<no name set>"'; let _defaultName = '"<no name set>"';
let parent = element.all(by.tagName('name-parent')).get(0); let parent = element.all(by.tagName('app-name-parent')).get(0);
let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex); let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
let displayName = hero.element(by.tagName('h3')).getText(); let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_defaultName); expect(displayName).toEqual(_defaultName);
@ -73,7 +73,7 @@ describe('Component Communication Cookbook Tests', function () {
}); });
it('should set expected values after clicking \'Minor\' twice', function () { it('should set expected values after clicking \'Minor\' twice', function () {
let repoTag = element(by.tagName('version-parent')); let repoTag = element(by.tagName('app-version-parent'));
let newMinorButton = repoTag.all(by.tagName('button')).get(0); let newMinorButton = repoTag.all(by.tagName('button')).get(0);
newMinorButton.click().then(function() { newMinorButton.click().then(function() {
@ -91,7 +91,7 @@ describe('Component Communication Cookbook Tests', function () {
}); });
it('should set expected values after clicking \'Major\' once', function () { it('should set expected values after clicking \'Major\' once', function () {
let repoTag = element(by.tagName('version-parent')); let repoTag = element(by.tagName('app-version-parent'));
let newMajorButton = repoTag.all(by.tagName('button')).get(1); let newMajorButton = repoTag.all(by.tagName('button')).get(1);
newMajorButton.click().then(function() { newMajorButton.click().then(function() {
@ -107,7 +107,7 @@ describe('Component Communication Cookbook Tests', function () {
}); });
function getActual() { function getActual() {
let versionTag = element(by.tagName('version-child')); let versionTag = element(by.tagName('app-version-child'));
let label = versionTag.element(by.tagName('h3')).getText(); let label = versionTag.element(by.tagName('h3')).getText();
let ul = versionTag.element((by.tagName('ul'))); let ul = versionTag.element((by.tagName('ul')));
let logs = ul.all(by.tagName('li')); let logs = ul.all(by.tagName('li'));
@ -127,26 +127,26 @@ describe('Component Communication Cookbook Tests', function () {
// #docregion child-to-parent // #docregion child-to-parent
// ... // ...
it('should not emit the event initially', function () { it('should not emit the event initially', function () {
let voteLabel = element(by.tagName('vote-taker')) let voteLabel = element(by.tagName('app-vote-taker'))
.element(by.tagName('h3')).getText(); .element(by.tagName('h3')).getText();
expect(voteLabel).toBe('Agree: 0, Disagree: 0'); expect(voteLabel).toBe('Agree: 0, Disagree: 0');
}); });
it('should process Agree vote', function () { it('should process Agree vote', function () {
let agreeButton1 = element.all(by.tagName('my-voter')).get(0) let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
.all(by.tagName('button')).get(0); .all(by.tagName('button')).get(0);
agreeButton1.click().then(function() { agreeButton1.click().then(function() {
let voteLabel = element(by.tagName('vote-taker')) let voteLabel = element(by.tagName('app-vote-taker'))
.element(by.tagName('h3')).getText(); .element(by.tagName('h3')).getText();
expect(voteLabel).toBe('Agree: 1, Disagree: 0'); expect(voteLabel).toBe('Agree: 1, Disagree: 0');
}); });
}); });
it('should process Disagree vote', function () { it('should process Disagree vote', function () {
let agreeButton1 = element.all(by.tagName('my-voter')).get(1) let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
.all(by.tagName('button')).get(1); .all(by.tagName('button')).get(1);
agreeButton1.click().then(function() { agreeButton1.click().then(function() {
let voteLabel = element(by.tagName('vote-taker')) let voteLabel = element(by.tagName('app-vote-taker'))
.element(by.tagName('h3')).getText(); .element(by.tagName('h3')).getText();
expect(voteLabel).toBe('Agree: 1, Disagree: 1'); expect(voteLabel).toBe('Agree: 1, Disagree: 1');
}); });
@ -170,7 +170,7 @@ describe('Component Communication Cookbook Tests', function () {
// ... // ...
it('timer and parent seconds should match', function () { it('timer and parent seconds should match', function () {
let parent = element(by.tagName(parentTag)); let parent = element(by.tagName(parentTag));
let message = parent.element(by.tagName('countdown-timer')).getText(); let message = parent.element(by.tagName('app-countdown-timer')).getText();
browser.sleep(10); // give `seconds` a chance to catchup with `message` browser.sleep(10); // give `seconds` a chance to catchup with `message`
let seconds = parent.element(by.className('seconds')).getText(); let seconds = parent.element(by.className('seconds')).getText();
expect(message).toContain(seconds); expect(message).toContain(seconds);
@ -181,7 +181,7 @@ describe('Component Communication Cookbook Tests', function () {
let stopButton = parent.all(by.tagName('button')).get(1); let stopButton = parent.all(by.tagName('button')).get(1);
stopButton.click().then(function() { stopButton.click().then(function() {
let message = parent.element(by.tagName('countdown-timer')).getText(); let message = parent.element(by.tagName('app-countdown-timer')).getText();
expect(message).toContain('Holding'); expect(message).toContain('Holding');
}); });
}); });
@ -194,7 +194,7 @@ describe('Component Communication Cookbook Tests', function () {
// #docregion bidirectional-service // #docregion bidirectional-service
// ... // ...
it('should announce a mission', function () { it('should announce a mission', function () {
let missionControl = element(by.tagName('mission-control')); let missionControl = element(by.tagName('app-mission-control'));
let announceButton = missionControl.all(by.tagName('button')).get(0); let announceButton = missionControl.all(by.tagName('button')).get(0);
announceButton.click().then(function () { announceButton.click().then(function () {
let history = missionControl.all(by.tagName('li')); let history = missionControl.all(by.tagName('li'));
@ -217,7 +217,7 @@ describe('Component Communication Cookbook Tests', function () {
function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) { function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
let _confirmedLog = ' confirmed the mission'; let _confirmedLog = ' confirmed the mission';
let missionControl = element(by.tagName('mission-control')); let missionControl = element(by.tagName('app-mission-control'));
let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex); let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
confirmButton.click().then(function () { confirmButton.click().then(function () {
let history = missionControl.all(by.tagName('li')); let history = missionControl.all(by.tagName('li'));

14
aio/content/examples/component-interaction/src/app/app.component.html
View File

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

2
aio/content/examples/component-interaction/src/app/app.component.ts
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -2,10 +2,10 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'name-parent', selector: 'app-name-parent',
template: ` template: `
<h2>Master controls {{names.length}} names</h2> <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 { export class NameParentComponent {

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

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

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

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

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

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

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

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

0
aio/content/examples/component-interaction/src/demo.css → aio/content/examples/component-interaction/src/assets/demo.css
View File

17
aio/content/examples/component-interaction/src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Passing information from parent to child</title> <title>Passing information from parent to child</title>
@ -7,23 +7,10 @@
<style> <style>
.to-top {margin-top: 8px; display: block;} .to-top {margin-top: 8px; display: block;}
</style> </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> </head>
<body> <body>
<my-app>loading...</my-app> <app-root></app-root>
</body> </body>
</html> </html>

6
aio/content/examples/component-interaction/src/main.ts
View File

@ -1,5 +1,11 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

18
aio/content/examples/component-styles/e2e-spec.ts → aio/content/examples/component-styles/e2e/app.e2e-spec.ts
View File

@ -9,7 +9,7 @@ describe('Component Style Tests', function () {
}); });
it('scopes component styles to component view', function() { it('scopes component styles to component view', function() {
let componentH1 = element(by.css('hero-app > h1')); let componentH1 = element(by.css('app-root > h1'));
let externalH1 = element(by.css('body > h1')); let externalH1 = element(by.css('body > h1'));
expect(componentH1.getCssValue('fontWeight')).toEqual('normal'); expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
@ -18,47 +18,47 @@ describe('Component Style Tests', function () {
it('allows styling :host element', function() { it('allows styling :host element', function() {
let host = element(by.css('hero-details')); let host = element(by.css('app-hero-details'));
expect(host.getCssValue('borderWidth')).toEqual('1px'); expect(host.getCssValue('borderWidth')).toEqual('1px');
}); });
it('supports :host() in function form', function() { it('supports :host() in function form', function() {
let host = element(by.css('hero-details')); let host = element(by.css('app-hero-details'));
host.element(by.buttonText('Activate')).click(); host.element(by.buttonText('Activate')).click();
expect(host.getCssValue('borderWidth')).toEqual('3px'); expect(host.getCssValue('borderWidth')).toEqual('3px');
}); });
it('allows conditional :host-context() styling', function() { it('allows conditional :host-context() styling', function() {
let h2 = element(by.css('hero-details h2')); let h2 = element(by.css('app-hero-details h2'));
expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
}); });
it('styles both view and content children with /deep/', function() { it('styles both view and content children with /deep/', function() {
let viewH3 = element(by.css('hero-team h3')); let viewH3 = element(by.css('app-hero-team h3'));
let contentH3 = element(by.css('hero-controls h3')); let contentH3 = element(by.css('app-hero-controls h3'));
expect(viewH3.getCssValue('fontStyle')).toEqual('italic'); expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
expect(contentH3.getCssValue('fontStyle')).toEqual('italic'); expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
}); });
it('includes styles loaded with CSS @import', function() { it('includes styles loaded with CSS @import', function() {
let host = element(by.css('hero-details')); let host = element(by.css('app-hero-details'));
expect(host.getCssValue('padding')).toEqual('10px'); expect(host.getCssValue('padding')).toEqual('10px');
}); });
it('processes template inline styles', function() { it('processes template inline styles', function() {
let button = element(by.css('hero-controls button')); let button = element(by.css('app-hero-controls button'));
let externalButton = element(by.css('body > button')); let externalButton = element(by.css('body > button'));
expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)'); expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
}); });
it('processes template <link>s', function() { it('processes template <link>s', function() {
let li = element(by.css('hero-team li:first-child')); let li = element(by.css('app-hero-team li:first-child'));
let externalLi = element(by.css('body > ul li')); let externalLi = element(by.css('body > ul li'));
expect(li.getCssValue('listStyleType')).toEqual('square'); expect(li.getCssValue('listStyleType')).toEqual('square');

10
aio/content/examples/component-styles/src/app/hero-app-main.component.ts
View File

@ -3,12 +3,12 @@ import { Component, Input } from '@angular/core';
import { Hero } from './hero'; import { Hero } from './hero';
@Component({ @Component({
selector: 'hero-app-main', selector: 'app-hero-main',
template: ` template: `
<quest-summary></quest-summary> <app-quest-summary></app-quest-summary>
<hero-details [hero]=hero [class.active]=hero.active> <app-hero-details [hero]="hero" [class.active]="hero.active">
<hero-controls [hero]=hero></hero-controls> <app-hero-controls [hero]="hero"></app-hero-controls>
</hero-details> </app-hero-details>
` `
}) })
export class HeroAppMainComponent { export class HeroAppMainComponent {

4
aio/content/examples/component-styles/src/app/hero-app.component.ts
View File

@ -3,10 +3,10 @@ import { Hero } from './hero';
// #docregion // #docregion
@Component({ @Component({
selector: 'hero-app', selector: 'app-root',
template: ` template: `
<h1>Tour of Heroes</h1> <h1>Tour of Heroes</h1>
<hero-app-main [hero]=hero></hero-app-main>`, <app-hero-main [hero]=hero></app-hero-main>`,
styles: ['h1 { font-weight: normal; }'] styles: ['h1 { font-weight: normal; }']
}) })
export class HeroAppComponent { export class HeroAppComponent {

2
aio/content/examples/component-styles/src/app/hero-controls.component.ts
View File

@ -3,7 +3,7 @@ import { Hero } from './hero';
// #docregion inlinestyles // #docregion inlinestyles
@Component({ @Component({
selector: 'hero-controls', selector: 'app-hero-controls',
template: ` template: `
<style> <style>
button { button {

6
aio/content/examples/component-styles/src/app/hero-details.component.ts
View File

@ -3,13 +3,13 @@ import { Hero } from './hero';
// #docregion styleurls // #docregion styleurls
@Component({ @Component({
selector: 'hero-details', selector: 'app-hero-details',
template: ` template: `
<h2>{{hero.name}}</h2> <h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team> <app-hero-team [hero]=hero></app-hero-team>
<ng-content></ng-content> <ng-content></ng-content>
`, `,
styleUrls: ['app/hero-details.component.css'] styleUrls: ['./hero-details.component.css']
}) })
export class HeroDetailsComponent { export class HeroDetailsComponent {
// #enddocregion styleurls // #enddocregion styleurls

4
aio/content/examples/component-styles/src/app/hero-team.component.ts
View File

@ -3,9 +3,9 @@ import { Hero } from './hero';
// #docregion stylelink // #docregion stylelink
@Component({ @Component({
selector: 'hero-team', selector: 'app-hero-team',
template: ` template: `
<link rel="stylesheet" href="app/hero-team.component.css"> <link rel="stylesheet" href="assets/hero-team.component.css">
<h3>Team</h3> <h3>Team</h3>
<ul> <ul>
<li *ngFor="let member of hero.team"> <li *ngFor="let member of hero.team">

2
aio/content/examples/component-styles/src/app/quest-summary.component.ts
View File

@ -4,7 +4,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
// #docregion // #docregion
@Component({ @Component({
selector: 'quest-summary', selector: 'app-quest-summary',
// #docregion urls // #docregion urls
templateUrl: './quest-summary.component.html', templateUrl: './quest-summary.component.html',
styleUrls: ['./quest-summary.component.css'] styleUrls: ['./quest-summary.component.css']

0
aio/content/examples/component-styles/src/app/hero-team.component.css → aio/content/examples/component-styles/src/assets/hero-team.component.css
View File

16
aio/content/examples/component-styles/src/index.html
View File

@ -1,27 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Component Styles</title> <title>Component Styles</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.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> </head>
<body> <body>
<h1 style="visibility: hidden;">External H1 Title for E2E test</h1> <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
<hero-app></hero-app> <app-root></app-root>
<button style="visibility: hidden;">External button for E2E test</button> <button style="visibility: hidden;">External button for E2E test</button>
<ul style="visibility: hidden;"> <ul style="visibility: hidden;">
<li>External list for E2E test</li> <li>External list for E2E test</li>

7
aio/content/examples/component-styles/src/main.ts
View File

@ -1,5 +1,12 @@
// #docregion // #docregion
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

2
aio/content/examples/dependency-injection-in-action/e2e-spec.ts → aio/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts
View File

@ -69,7 +69,7 @@ describe('Dependency Injection Cookbook', function () {
}); });
it('should highlight Hero Bios and Contacts container when mouseover', function () { it('should highlight Hero Bios and Contacts container when mouseover', function () {
let target = element(by.css('div[myHighlight="yellow"]')); let target = element(by.css('div[appHighlight="yellow"]'));
let yellow = 'rgba(255, 255, 0, 1)'; let yellow = 'rgba(255, 255, 0, 1)';
expect(target.getCssValue('background-color')).not.toEqual(yellow); expect(target.getCssValue('background-color')).not.toEqual(yellow);

16
aio/content/examples/dependency-injection-in-action/src/app/app.component.html
View File

@ -7,32 +7,32 @@
<div class="di-component"> <div class="di-component">
<h3>Hero Bios</h3> <h3>Hero Bios</h3>
<hero-bios></hero-bios> <app-hero-bios></app-hero-bios>
</div> </div>
<!-- #docregion highlight --> <!-- #docregion highlight -->
<div id="highlight" class="di-component" myHighlight> <div id="highlight" class="di-component" appHighlight>
<h3>Hero Bios and Contacts</h3> <h3>Hero Bios and Contacts</h3>
<div myHighlight="yellow"> <div appHighlight="yellow">
<hero-bios-and-contacts></hero-bios-and-contacts> <app-hero-bios-and-contacts></app-hero-bios-and-contacts>
</div> </div>
</div> </div>
<!-- #enddocregion highlight --> <!-- #enddocregion highlight -->
<div class="di-component"> <div class="di-component">
<hero-of-the-month></hero-of-the-month> <app-hero-of-the-month></app-hero-of-the-month>
</div> </div>
<div class="di-component"> <div class="di-component">
<h3>Unsorted Heroes</h3> <h3>Unsorted Heroes</h3>
<unsorted-heroes></unsorted-heroes> <app-unsorted-heroes></app-unsorted-heroes>
</div> </div>
<div class="di-component"> <div class="di-component">
<h3>Sorted Heroes</h3> <h3>Sorted Heroes</h3>
<sorted-heroes></sorted-heroes> <app-sorted-heroes></app-sorted-heroes>
</div> </div>
<div class="di-component"> <div class="di-component">
<parent-finder></parent-finder> <app-parent-finder></app-parent-finder>
</div> </div>

2
aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
View File

@ -7,7 +7,7 @@ import { UserContextService } from './user-context.service';
import { UserService } from './user.service'; import { UserService } from './user.service';
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
// #docregion providers // #docregion providers
providers: [ LoggerService, UserContextService, UserService ] providers: [ LoggerService, UserContextService, UserService ]

2
aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
View File

@ -5,7 +5,7 @@ import { HeroCacheService } from './hero-cache.service';
// #docregion component // #docregion component
@Component({ @Component({
selector: 'hero-bio', selector: 'app-hero-bio',
// #docregion template // #docregion template
template: ` template: `
<h4>{{hero.name}}</h4> <h4>{{hero.name}}</h4>

16
aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
View File

@ -8,11 +8,11 @@ import { LoggerService } from './logger.service';
//////// HeroBiosComponent //// //////// HeroBiosComponent ////
// #docregion simple // #docregion simple
@Component({ @Component({
selector: 'hero-bios', selector: 'app-hero-bios',
template: ` template: `
<hero-bio [heroId]="1"></hero-bio> <app-hero-bio [heroId]="1"></app-hero-bio>
<hero-bio [heroId]="2"></hero-bio> <app-hero-bio [heroId]="2"></app-hero-bio>
<hero-bio [heroId]="3"></hero-bio>`, <app-hero-bio [heroId]="3"></app-hero-bio>`,
providers: [HeroService] providers: [HeroService]
}) })
export class HeroBiosComponent { export class HeroBiosComponent {
@ -29,12 +29,12 @@ export class HeroBiosComponent {
//////// HeroBiosAndContactsComponent //// //////// HeroBiosAndContactsComponent ////
// #docregion hero-bios-and-contacts // #docregion hero-bios-and-contacts
@Component({ @Component({
selector: 'hero-bios-and-contacts', selector: 'app-hero-bios-and-contacts',
// #docregion template // #docregion template
template: ` template: `
<hero-bio [heroId]="1"> <hero-contact></hero-contact> </hero-bio> <app-hero-bio [heroId]="1"> <app-hero-contact></app-hero-contact> </app-hero-bio>
<hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio> <app-hero-bio [heroId]="2"> <app-hero-contact></app-hero-contact> </app-hero-bio>
<hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`, <app-hero-bio [heroId]="3"> <app-hero-contact></app-hero-contact> </app-hero-bio>`,
// #enddocregion template // #enddocregion template
// #docregion class-provider // #docregion class-provider
providers: [HeroService] providers: [HeroService]

2
aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
View File

@ -7,7 +7,7 @@ import { LoggerService } from './logger.service';
// #docregion component // #docregion component
@Component({ @Component({
selector: 'hero-contact', selector: 'app-hero-contact',
template: ` template: `
<div>Phone #: {{phoneNumber}} <div>Phone #: {{phoneNumber}}
<span *ngIf="hasLogger">!!!</span></div>` <span *ngIf="hasLogger">!!!</span></div>`

2
aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts
View File

@ -6,7 +6,7 @@ import { MinimalLogger } from './minimal-logger.service';
// #docregion // #docregion
@Component({ @Component({
selector: 'hero-of-the-month', selector: 'app-hero-of-the-month',
templateUrl: './hero-of-the-month.component.html', templateUrl: './hero-of-the-month.component.html',
// Todo: move this aliasing, `useExisting` provider to the AppModule // Todo: move this aliasing, `useExisting` provider to the AppModule
providers: [{ provide: MinimalLogger, useExisting: LoggerService }] providers: [{ provide: MinimalLogger, useExisting: LoggerService }]

2
aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
View File

@ -24,7 +24,7 @@ const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
// #docregion hero-of-the-month // #docregion hero-of-the-month
@Component({ @Component({
selector: 'hero-of-the-month', selector: 'app-hero-of-the-month',
templateUrl: './hero-of-the-month.component.html', templateUrl: './hero-of-the-month.component.html',
providers: [ providers: [
// #docregion use-value // #docregion use-value

4
aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
View File

@ -3,11 +3,11 @@
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({ @Directive({
selector: '[myHighlight]' selector: '[appHighlight]'
}) })
export class HighlightDirective { export class HighlightDirective {
@Input('myHighlight') highlightColor: string; @Input('appHighlight') highlightColor: string;
private el: HTMLElement; private el: HTMLElement;

2
aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
View File

@ -206,7 +206,7 @@ export class CathyComponent {
///////// ParentFinder ////// ///////// ParentFinder //////
@Component({ @Component({
selector: 'parent-finder', selector: 'app-parent-finder',
template: ` template: `
<h2>Parent Finder</h2> <h2>Parent Finder</h2>
<alex></alex> <alex></alex>

4
aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
View File

@ -8,7 +8,7 @@ import { HeroService } from './hero.service';
/////// HeroesBaseComponent ///// /////// HeroesBaseComponent /////
// #docregion heroes-base, injection // #docregion heroes-base, injection
@Component({ @Component({
selector: 'unsorted-heroes', selector: 'app-unsorted-heroes',
template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`, template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
providers: [HeroService] providers: [HeroService]
}) })
@ -33,7 +33,7 @@ export class HeroesBaseComponent implements OnInit {
/////// SortedHeroesComponent ///// /////// SortedHeroesComponent /////
// #docregion sorted-heroes // #docregion sorted-heroes
@Component({ @Component({
selector: 'sorted-heroes', selector: 'app-sorted-heroes',
template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`, template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
providers: [HeroService] providers: [HeroService]
}) })

0
aio/content/examples/dependency-injection-in-action/src/sample.css → aio/content/examples/dependency-injection-in-action/src/assets/sample.css
View File

20
aio/content/examples/dependency-injection-in-action/src/index.html
View File

@ -1,29 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<base href="/"> <base href="/">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Dependency Injection</title> <title>Dependency Injection</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- #docregion style --> <link rel="stylesheet" href="assets/sample.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="sample.css">
<!-- #enddocregion style -->
<!-- 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> </head>
<body> <body>
<my-app>Loading app...</my-app> <app-root></app-root>
</body> </body>
</html> </html>

7
aio/content/examples/dependency-injection-in-action/src/main.ts
View File

@ -1,5 +1,12 @@
// #docregion // #docregion
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

12
aio/content/examples/dependency-injection/e2e-spec.ts → aio/content/examples/dependency-injection/e2e/app.e2e-spec.ts
View File

@ -140,12 +140,12 @@ describe('Dependency Injection Tests', function () {
}); });
it('unauthorized user should have multiple unauthorized heroes', function () { it('unauthorized user should have multiple unauthorized heroes', function () {
let heroes = element.all(by.css('#unauthorized hero-list div')); let heroes = element.all(by.css('#unauthorized app-hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
}); });
it('unauthorized user should have no secret heroes', function () { it('unauthorized user should have no secret heroes', function () {
let heroes = element.all(by.css('#unauthorized hero-list div')); let heroes = element.all(by.css('#unauthorized app-hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => { let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
@ -158,7 +158,7 @@ describe('Dependency Injection Tests', function () {
}); });
it('unauthorized user should have no authorized heroes listed', function () { it('unauthorized user should have no authorized heroes listed', function () {
expect(element.all(by.css('#authorized hero-list div')).count()).toEqual(0); expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
}); });
describe('after button click', function() { describe('after button click', function() {
@ -174,12 +174,12 @@ describe('Dependency Injection Tests', function () {
}); });
it('authorized user should have multiple authorized heroes ', function () { it('authorized user should have multiple authorized heroes ', function () {
let heroes = element.all(by.css('#authorized hero-list div')); let heroes = element.all(by.css('#authorized app-hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
}); });
it('authorized user should have secret heroes', function () { it('authorized user should have secret heroes', function () {
let heroes = element.all(by.css('#authorized hero-list div')); let heroes = element.all(by.css('#authorized app-hero-list div'));
expect(heroes.count()).toBeGreaterThan(0); expect(heroes.count()).toBeGreaterThan(0);
let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number){ let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number){
@ -192,7 +192,7 @@ describe('Dependency Injection Tests', function () {
}); });
it('authorized user should have no unauthorized heroes listed', function () { it('authorized user should have no unauthorized heroes listed', function () {
expect(element.all(by.css('#unauthorized hero-list div')).count()).toEqual(0); expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
}); });
}); });
}); });

6
aio/content/examples/dependency-injection/src/app/app.component.1.ts
View File

@ -4,11 +4,11 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
template: ` template: `
<h1>{{title}}</h1> <h1>{{title}}</h1>
<my-car></my-car> <app-car></app-car>
<my-heroes></my-heroes> <app-heroes></app-heroes>
` `
}) })

6
aio/content/examples/dependency-injection/src/app/app.component.2.ts
View File

@ -7,11 +7,11 @@ import { APP_CONFIG, AppConfig } from './app.config';
// #enddocregion imports // #enddocregion imports
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
template: ` template: `
<h1>{{title}}</h1> <h1>{{title}}</h1>
<my-car></my-car> <app-car></app-car>
<my-heroes></my-heroes> <app-heroes></app-heroes>
` `
}) })
export class AppComponent { export class AppComponent {

14
aio/content/examples/dependency-injection/src/app/app.component.ts
View File

@ -9,20 +9,20 @@ import { UserService } from './user.service';
// #enddocregion imports // #enddocregion imports
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
template: ` template: `
<h1>{{title}}</h1> <h1>{{title}}</h1>
<my-car></my-car> <app-car></app-car>
<my-injectors></my-injectors> <app-injectors></app-injectors>
<my-tests></my-tests> <app-tests></app-tests>
<h2>User</h2> <h2>User</h2>
<p id="user"> <p id="user">
{{userInfo}} {{userInfo}}
<button (click)="nextUser()">Next User</button> <button (click)="nextUser()">Next User</button>
<p> <p>
<my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes> <app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
<my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes> <app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
<my-providers></my-providers> <app-providers></app-providers>
`, `,
providers: [Logger] providers: [Logger]
}) })

2
aio/content/examples/dependency-injection/src/app/car/car.component.ts
View File

@ -13,7 +13,7 @@ import { useInjector } from './car-injector';
@Component({ @Component({
selector: 'my-car', selector: 'app-car',
template: ` template: `
<h2>Cars</h2> <h2>Cars</h2>
<div id="di">{{car.drive()}}</div> <div id="di">{{car.drive()}}</div>

2
aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
View File

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
import { HEROES } from './mock-heroes'; import { HEROES } from './mock-heroes';
@Component({ @Component({
selector: 'hero-list', selector: 'app-hero-list',
template: ` template: `
<div *ngFor="let hero of heroes"> <div *ngFor="let hero of heroes">
{{hero.id}} - {{hero.name}} {{hero.id}} - {{hero.name}}

2
aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
View File

@ -13,7 +13,7 @@ import { HeroService } from './hero.service';
// #docregion // #docregion
@Component({ @Component({
selector: 'hero-list', selector: 'app-hero-list',
template: ` template: `
<div *ngFor="let hero of heroes"> <div *ngFor="let hero of heroes">
{{hero.id}} - {{hero.name}} {{hero.id}} - {{hero.name}}

2
aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
View File

@ -6,7 +6,7 @@ import { Hero } from './hero';
import { HeroService } from './hero.service'; import { HeroService } from './hero.service';
@Component({ @Component({
selector: 'hero-list', selector: 'app-hero-list',
template: ` template: `
<div *ngFor="let hero of heroes"> <div *ngFor="let hero of heroes">
{{hero.id}} - {{hero.name}} {{hero.id}} - {{hero.name}}

Some files were not shown because too many files have changed in this diff Show More