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
**/src/environments/environment.prod.ts
**/src/environments/environment.ts
**/src/assets/.gitkeep
**/src/styles.css
**/src/systemjs-angular-loader.js
**/src/systemjs.config.js
**/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.json
**/package.json
@ -53,14 +67,18 @@ dist/
# testing
!testing/src/browser-test-shim.js
!testing/karma*.js
# webpack
!webpack/**/config/*.js
!webpack/**/*webpack*.js
!webpack/src/polyfills.ts
# styleguide
!styleguide/src/systemjs.custom.js
# plunkers
*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) {
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);
posterButton.click().then(function () {
@ -92,11 +92,11 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
}
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) {
let movieListComp = element(by.tagName('movie-list'));
let movieListComp = element(by.tagName('app-movie-list'));
let heroInput = movieListComp.element(by.tagName('input'));
let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
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';
@Component({
selector: 'my-app',
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
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
@Component({
selector: 'movie-list',
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
// #docregion style-url
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 [
{
hero: 'Celeritas',
imageurl: 'images/hero.png',
imageurl: 'assets/images/hero.png',
movieId: 1,
mpaa: 'pg-13',
releaseDate: '2015-12-19T00:00:00',
@ -19,7 +19,7 @@ export class MovieService {
},
{
hero: 'Mr. Nice',
imageurl: 'images/villain.png',
imageurl: 'assets/images/villain.png',
movieId: 2,
mpaa: 'pg-13',
releaseDate: '2015-12-18T00:00:00',
@ -30,7 +30,7 @@ export class MovieService {
},
{
hero: 'Angular',
imageurl: 'images/ng-logo.png',
imageurl: 'assets/images/ng-logo.png',
movieId: 3,
mpaa: 'pg-13',
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>
<html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
@ -8,21 +8,10 @@
<!-- #docregion style -->
<link rel="stylesheet" href="styles.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>
<body>
<my-app>Loading app...</my-app>
<app-root></app-root>
</body>
</html>

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

@ -1,5 +1,12 @@
// #docregion
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);

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;
beforeEach(() => {
host = element(by.css('hero-list-basic'));
host = element(by.css('app-hero-list-basic'));
});
it('animates between active and inactive', () => {
@ -58,7 +58,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
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', () => {
@ -79,7 +79,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-combined-transitions'));
host = element(by.css('app-hero-list-combined-transitions'));
});
it('animates between active and inactive', () => {
@ -108,7 +108,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-twoway'));
host = element(by.css('app-hero-list-twoway'));
});
it('animates between active and inactive', () => {
@ -137,7 +137,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-enter-leave'));
host = element(by.css('app-hero-list-enter-leave'));
});
it('adds and removes element', () => {
@ -157,7 +157,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
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', () => {
@ -186,7 +186,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(function() {
host = element(by.css('hero-list-auto'));
host = element(by.css('app-hero-list-auto'));
});
it('adds and removes element', () => {
@ -206,7 +206,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-timings'));
host = element(by.css('app-hero-list-timings'));
});
it('adds and removes element', () => {
@ -227,7 +227,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-multistep'));
host = element(by.css('app-hero-list-multistep'));
});
it('adds and removes element', () => {
@ -248,7 +248,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-groups'));
host = element(by.css('app-hero-list-groups'));
});
it('adds and removes element', () => {
@ -269,7 +269,7 @@ describe('Animation Tests', () => {
let host: ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-basic'));
host = element(by.css('app-hero-list-basic'));
});
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';
@Component({
selector: 'hero-list-auto',
selector: 'app-hero-list-auto',
// #docregion template
template: `
<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';
@Component({
selector: 'hero-list-basic',
selector: 'app-hero-list-basic',
// #enddocregion
/* The click event calls hero.toggleState(), which
* 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';
@Component({
selector: 'hero-list-combined-transitions',
selector: 'app-hero-list-combined-transitions',
// #docregion template
template: `
<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';
@Component({
selector: 'hero-list-enter-leave-states',
selector: 'app-hero-list-enter-leave-states',
// #docregion template
template: `
<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';
@Component({
selector: 'hero-list-enter-leave',
selector: 'app-hero-list-enter-leave',
// #docregion template
template: `
<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';
@Component({
selector: 'hero-list-groups',
selector: 'app-hero-list-groups',
template: `
<ul>
<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';
@Component({
selector: 'hero-list-inline-styles',
selector: 'app-hero-list-inline-styles',
// #docregion template
template: `
<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';
@Component({
selector: 'hero-list-multistep',
selector: 'app-hero-list-multistep',
// #docregion template
template: `
<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';
@Component({
selector: 'hero-list-timings',
selector: 'app-hero-list-timings',
template: `
<ul>
<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';
@Component({
selector: 'hero-list-twoway',
selector: 'app-hero-list-twoway',
// #docregion template
template: `
<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';
@Component({
selector: 'hero-team-builder',
selector: 'app-root',
template: `
<div class="buttons">
<button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
@ -15,27 +15,27 @@ import { Hero, HeroService } from './hero.service';
<div class="column">
<h4>Basic State</h4>
<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 class="column">
<h4>Styles inline in transitions</h4>
<p>Animated effect on click, no persistent end styles.</p>
<hero-list-inline-styles [heroes]="heroes"></hero-list-inline-styles>
<p>Animated effect on click, no persistend end styles.</p>
<app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
</div>
<div class="column">
<h4>Combined transition syntax</h4>
<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 class="column">
<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>
<hero-list-twoway [heroes]="heroes"></hero-list-twoway>
<app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
</div>
<div class="column">
<h4>Enter & Leave</h4>
<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 class="columns">
@ -45,27 +45,27 @@ import { Hero, HeroService } from './hero.service';
Enter and leave animations combined with active/inactive state animations.
Different enter and leave transitions depending on state.
</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 class="column">
<h4>Auto Style Calc</h4>
<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 class="column">
<h4>Different Timings</h4>
<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 class="column">
<h4>Multiple Keyframes</h4>
<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 class="column">
<h4>Parallel Groups</h4>
<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>
`,

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

@ -5,26 +5,14 @@
<title>Animations</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill for Web Animations -->
<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>
<body>
<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>
<ul style="visibility: hidden;">
<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 { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
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 -->
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Ahead of time compilation (JIT)</title>
<base href="/">

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

@ -1,6 +1,6 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Ahead of time compilation</title>
<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() {
return {
heroes: element.all(by.css('my-app li')),
heroDetail: element(by.css('my-app hero-detail')),
salesTaxAmountInput: element(by.css('my-app sales-tax input')),
salesTaxDetail: element(by.css('my-app sales-tax div'))
heroes: element.all(by.css('app-root li')),
heroDetail: element(by.css('app-root app-hero-detail')),
salesTaxAmountInput: element(by.css('app-root app-sales-tax input')),
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
@Component({
selector: 'my-app',
selector: 'app-root',
template: `
<hero-list></hero-list>
<sales-tax></sales-tax>
<app-hero-list></app-hero-list>
<app-sales-tax></app-sales-tax>
`
})
// #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';
@Component({
selector: 'hero-detail',
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {

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

@ -1,9 +1,9 @@
<!--#docregion binding -->
<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>
<!--#enddocregion binding -->
<!--#docregion structural -->
<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>
</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
@Component({
selector: 'hero-list',
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
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';
@Component({
selector: 'sales-tax',
selector: 'app-sales-tax',
template: `
<h2>Sales Tax Calculator</h2>
Amount: <input #amountBox (change)="0">

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

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

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

@ -1,5 +1,12 @@
// #docregion
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);

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 -->
<h1>My First Attribute Directive</h1>
<!-- #docregion applied -->
<p myHighlight>Highlight me!</p>
<p appHightlight>Highlight me!</p>
<!-- #enddocregion applied, -->
<!-- #docregion color-1 -->
<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
<p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>
<!-- #enddocregion color-1 -->
<!-- #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 -->

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

@ -1,7 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
selector: 'app-root',
templateUrl: './app.component.1.html'
})
// #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
</div>
<!-- #docregion color -->
<p [myHighlight]="color">Highlight me!</p>
<p [appHighlight]="color">Highlight me!</p>
<!-- #enddocregion color, v2 -->
<!-- #docregion defaultColor -->
<p [myHighlight]="color" defaultColor="violet">
<p [appHighlight]="color" defaultColor="violet">
Highlight me too!
</p>
<!-- #enddocregion defaultColor, -->
@ -20,5 +20,5 @@
<hr>
<p><i>Mouse over the following lines to see fixed highlights</i></p>
<p [myHighlight]="'yellow'">Highlighted in yellow</p>
<p myHighlight="orange">Highlighted in orange</p>
<p [appHighlight]="'yellow'">Highlighted in yellow</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';
@Component({
selector: 'my-app',
selector: 'app-root',
templateUrl: './app.component.html'
})
// #docregion class

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

@ -2,7 +2,7 @@
// #docregion
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
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';
@Directive({
selector: '[myHighlight]'
selector: '[appHighlight]'
})
export class HighlightDirective {
// #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';
@Directive({
selector: '[myHighlight]'
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@Input('myHighlight') highlightColor: string;
@Input('appHighlight') highlightColor: string;
// #docregion mouse-enter
@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
@Directive({
selector: '[myHighlight]'
selector: '[appHighlight]'
})
export class HighlightDirective {
@ -15,7 +15,7 @@ export class HighlightDirective {
// #enddocregion defaultColor
// #docregion color
@Input('myHighlight') highlightColor: string;
@Input('appHighlight') highlightColor: string;
// #enddocregion color
// #docregion mouse-enter

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

@ -1,25 +1,13 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Directives</title>
<base href="/">
<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>
<body>
<my-app>loading...</my-app>
<app-root></app-root>
</body>
</html>

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

@ -1,5 +1,12 @@
// #docregion
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);

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() {
let page: MyAppPage;
import { browser, element, by } from 'protractor';
describe('cli-quickstart App', () => {
beforeEach(() => {
page = new MyAppPage();
return browser.get('/');
});
it('should display message saying app works', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!!');
let pageTitle = element(by.css('app-root h1')).getText();
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].*",
".angular-cli.json",
"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';
it('should pass properties to children properly', function () {
let parent = element.all(by.tagName('hero-parent')).get(0);
let heroes = parent.all(by.tagName('hero-child'));
let parent = element.all(by.tagName('app-hero-parent')).get(0);
let heroes = parent.all(by.tagName('app-hero-child'));
for (let i = 0; i < _heroNames.length; i++) {
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 () {
let _nonEmptyNameIndex = 0;
let _nonEmptyName = '"Mr. IQ"';
let parent = element.all(by.tagName('name-parent')).get(0);
let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
let parent = element.all(by.tagName('app-name-parent')).get(0);
let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_nonEmptyName);
@ -47,8 +47,8 @@ describe('Component Communication Cookbook Tests', function () {
it('should replace empty name with default name', function () {
let _emptyNameIndex = 1;
let _defaultName = '"<no name set>"';
let parent = element.all(by.tagName('name-parent')).get(0);
let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
let parent = element.all(by.tagName('app-name-parent')).get(0);
let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_defaultName);
@ -73,7 +73,7 @@ describe('Component Communication Cookbook Tests', 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);
newMinorButton.click().then(function() {
@ -91,7 +91,7 @@ describe('Component Communication Cookbook Tests', 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);
newMajorButton.click().then(function() {
@ -107,7 +107,7 @@ describe('Component Communication Cookbook Tests', function () {
});
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 ul = versionTag.element((by.tagName('ul')));
let logs = ul.all(by.tagName('li'));
@ -127,26 +127,26 @@ describe('Component Communication Cookbook Tests', function () {
// #docregion child-to-parent
// ...
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();
expect(voteLabel).toBe('Agree: 0, Disagree: 0');
});
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);
agreeButton1.click().then(function() {
let voteLabel = element(by.tagName('vote-taker'))
let voteLabel = element(by.tagName('app-vote-taker'))
.element(by.tagName('h3')).getText();
expect(voteLabel).toBe('Agree: 1, Disagree: 0');
});
});
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);
agreeButton1.click().then(function() {
let voteLabel = element(by.tagName('vote-taker'))
let voteLabel = element(by.tagName('app-vote-taker'))
.element(by.tagName('h3')).getText();
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 () {
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`
let seconds = parent.element(by.className('seconds')).getText();
expect(message).toContain(seconds);
@ -181,7 +181,7 @@ describe('Component Communication Cookbook Tests', function () {
let stopButton = parent.all(by.tagName('button')).get(1);
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');
});
});
@ -194,7 +194,7 @@ describe('Component Communication Cookbook Tests', function () {
// #docregion bidirectional-service
// ...
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);
announceButton.click().then(function () {
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) {
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);
confirmButton.click().then(function () {
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/>
<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>

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

@ -1,7 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
selector: 'app-root',
templateUrl: './app.component.html'
})
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';
@Component({
selector: 'my-astronaut',
selector: 'app-astronaut',
template: `
<p>
{{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
// #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 {

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';
@Component({
selector: 'countdown-timer',
selector: 'app-countdown-timer',
template: '<p>{{message}}</p>'
})
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';
@Component({
selector: 'hero-child',
selector: 'app-hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<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';
@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 {

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';
@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>

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

@ -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 {

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

@ -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 {

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';
@Component({
selector: 'version-child',
selector: 'app-version-child',
template: `
<h3>Version {{major}}.{{minor}}</h3>
<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';
@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 {

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';
@Component({
selector: 'my-voter',
selector: 'app-voter',
template: `
<h4>{{name}}</h4>
<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';
@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 {

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>
<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>

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 { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
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() {
let componentH1 = element(by.css('hero-app > h1'));
let componentH1 = element(by.css('app-root > h1'));
let externalH1 = element(by.css('body > h1'));
expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
@ -18,47 +18,47 @@ describe('Component Style Tests', 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');
});
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();
expect(host.getCssValue('borderWidth')).toEqual('3px');
});
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
});
it('styles both view and content children with /deep/', function() {
let viewH3 = element(by.css('hero-team h3'));
let contentH3 = element(by.css('hero-controls h3'));
let viewH3 = element(by.css('app-hero-team h3'));
let contentH3 = element(by.css('app-hero-controls h3'));
expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
});
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');
});
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'));
expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
});
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'));
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';
@Component({
selector: 'hero-app-main',
selector: 'app-hero-main',
template: `
<quest-summary></quest-summary>
<hero-details [hero]=hero [class.active]=hero.active>
<hero-controls [hero]=hero></hero-controls>
</hero-details>
<app-quest-summary></app-quest-summary>
<app-hero-details [hero]="hero" [class.active]="hero.active">
<app-hero-controls [hero]="hero"></app-hero-controls>
</app-hero-details>
`
})
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
@Component({
selector: 'hero-app',
selector: 'app-root',
template: `
<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; }']
})
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
@Component({
selector: 'hero-controls',
selector: 'app-hero-controls',
template: `
<style>
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
@Component({
selector: 'hero-details',
selector: 'app-hero-details',
template: `
<h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team>
<app-hero-team [hero]=hero></app-hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css']
styleUrls: ['./hero-details.component.css']
})
export class HeroDetailsComponent {
// #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
@Component({
selector: 'hero-team',
selector: 'app-hero-team',
template: `
<link rel="stylesheet" href="app/hero-team.component.css">
<link rel="stylesheet" href="assets/hero-team.component.css">
<h3>Team</h3>
<ul>
<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
@Component({
selector: 'quest-summary',
selector: 'app-quest-summary',
// #docregion urls
templateUrl: './quest-summary.component.html',
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>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Component Styles</title>
<base href="/">
<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>
<body>
<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>
<ul style="visibility: hidden;">
<li>External list for E2E test</li>

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

@ -1,5 +1,12 @@
// #docregion
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);

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 () {
let target = element(by.css('div[myHighlight="yellow"]'));
let target = element(by.css('div[appHighlight="yellow"]'));
let yellow = 'rgba(255, 255, 0, 1)';
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">
<h3>Hero Bios</h3>
<hero-bios></hero-bios>
<app-hero-bios></app-hero-bios>
</div>
<!-- #docregion highlight -->
<div id="highlight" class="di-component" myHighlight>
<div id="highlight" class="di-component" appHighlight>
<h3>Hero Bios and Contacts</h3>
<div myHighlight="yellow">
<hero-bios-and-contacts></hero-bios-and-contacts>
<div appHighlight="yellow">
<app-hero-bios-and-contacts></app-hero-bios-and-contacts>
</div>
</div>
<!-- #enddocregion highlight -->
<div class="di-component">
<hero-of-the-month></hero-of-the-month>
<app-hero-of-the-month></app-hero-of-the-month>
</div>
<div class="di-component">
<h3>Unsorted Heroes</h3>
<unsorted-heroes></unsorted-heroes>
<app-unsorted-heroes></app-unsorted-heroes>
</div>
<div class="di-component">
<h3>Sorted Heroes</h3>
<sorted-heroes></sorted-heroes>
<app-sorted-heroes></app-sorted-heroes>
</div>
<div class="di-component">
<parent-finder></parent-finder>
<app-parent-finder></app-parent-finder>
</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';
@Component({
selector: 'my-app',
selector: 'app-root',
templateUrl: './app.component.html',
// #docregion providers
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
@Component({
selector: 'hero-bio',
selector: 'app-hero-bio',
// #docregion template
template: `
<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 ////
// #docregion simple
@Component({
selector: 'hero-bios',
selector: 'app-hero-bios',
template: `
<hero-bio [heroId]="1"></hero-bio>
<hero-bio [heroId]="2"></hero-bio>
<hero-bio [heroId]="3"></hero-bio>`,
<app-hero-bio [heroId]="1"></app-hero-bio>
<app-hero-bio [heroId]="2"></app-hero-bio>
<app-hero-bio [heroId]="3"></app-hero-bio>`,
providers: [HeroService]
})
export class HeroBiosComponent {
@ -29,12 +29,12 @@ export class HeroBiosComponent {
//////// HeroBiosAndContactsComponent ////
// #docregion hero-bios-and-contacts
@Component({
selector: 'hero-bios-and-contacts',
selector: 'app-hero-bios-and-contacts',
// #docregion template
template: `
<hero-bio [heroId]="1"> <hero-contact></hero-contact> </hero-bio>
<hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio>
<hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`,
<app-hero-bio [heroId]="1"> <app-hero-contact></app-hero-contact> </app-hero-bio>
<app-hero-bio [heroId]="2"> <app-hero-contact></app-hero-contact> </app-hero-bio>
<app-hero-bio [heroId]="3"> <app-hero-contact></app-hero-contact> </app-hero-bio>`,
// #enddocregion template
// #docregion class-provider
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
@Component({
selector: 'hero-contact',
selector: 'app-hero-contact',
template: `
<div>Phone #: {{phoneNumber}}
<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
@Component({
selector: 'hero-of-the-month',
selector: 'app-hero-of-the-month',
templateUrl: './hero-of-the-month.component.html',
// Todo: move this aliasing, `useExisting` provider to the AppModule
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
@Component({
selector: 'hero-of-the-month',
selector: 'app-hero-of-the-month',
templateUrl: './hero-of-the-month.component.html',
providers: [
// #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';
@Directive({
selector: '[myHighlight]'
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input('myHighlight') highlightColor: string;
@Input('appHighlight') highlightColor: string;
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 //////
@Component({
selector: 'parent-finder',
selector: 'app-parent-finder',
template: `
<h2>Parent Finder</h2>
<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 /////
// #docregion heroes-base, injection
@Component({
selector: 'unsorted-heroes',
selector: 'app-unsorted-heroes',
template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
providers: [HeroService]
})
@ -33,7 +33,7 @@ export class HeroesBaseComponent implements OnInit {
/////// SortedHeroesComponent /////
// #docregion sorted-heroes
@Component({
selector: 'sorted-heroes',
selector: 'app-sorted-heroes',
template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
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>
<html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Dependency Injection</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- #docregion style -->
<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>
<link rel="stylesheet" href="assets/sample.css">
</head>
<body>
<my-app>Loading app...</my-app>
<app-root></app-root>
</body>
</html>

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

@ -1,5 +1,12 @@
// #docregion
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);

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 () {
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);
});
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);
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 () {
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() {
@ -174,12 +174,12 @@ describe('Dependency Injection Tests', 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);
});
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);
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 () {
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';
@Component({
selector: 'my-app',
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<my-car></my-car>
<my-heroes></my-heroes>
<app-car></app-car>
<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
@Component({
selector: 'my-app',
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<my-car></my-car>
<my-heroes></my-heroes>
<app-car></app-car>
<app-heroes></app-heroes>
`
})
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
@Component({
selector: 'my-app',
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<my-car></my-car>
<my-injectors></my-injectors>
<my-tests></my-tests>
<app-car></app-car>
<app-injectors></app-injectors>
<app-tests></app-tests>
<h2>User</h2>
<p id="user">
{{userInfo}}
<button (click)="nextUser()">Next User</button>
<p>
<my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
<my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
<my-providers></my-providers>
<app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
<app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
<app-providers></app-providers>
`,
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({
selector: 'my-car',
selector: 'app-car',
template: `
<h2>Cars</h2>
<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';
@Component({
selector: 'hero-list',
selector: 'app-hero-list',
template: `
<div *ngFor="let hero of heroes">
{{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
@Component({
selector: 'hero-list',
selector: 'app-hero-list',
template: `
<div *ngFor="let hero of heroes">
{{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';
@Component({
selector: 'hero-list',
selector: 'app-hero-list',
template: `
<div *ngFor="let hero of heroes">
{{hero.id}} - {{hero.name}}

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