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

docs: remove unused "docregions" (#40479) 

This commit removes all the docregion tags in examples that are not
being referenced in any doc.

PR Close #40479
This commit is contained in:
Pete Bacon Darwin 2021-01-19 10:32:30 +00:00 committed by Jessica Janiuk
parent fb97e67fcb
commit 4a9f7daf37
184 changed files with 65 additions and 1037 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,9 +67,7 @@
<td>{{movie.hero}}</td>
<td>{{movie.releaseDate | date}}</td>
<td>{{movie.mpaa | uppercase}}</td>
<!-- #docregion currency -->
<td>{{movie.price | currency:'USD':true}}</td>
<!-- #enddocregion currency -->
<td>{{movie.starRating | number:'1.1-2'}}</td>
<td>{{movie.approvalRating | percent: '1.0-0'}}</td>
</tr>

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

@ -1,8 +1,6 @@
/* tslint:disable:no-unused-variable */
// #docplaster
// #docregion import
import { Component } from '@angular/core';
// #enddocregion import
import { IMovie } from './movie';
import { MovieService } from './movie.service';

19
aio/content/examples/animations/src/app/app.component.1.ts
View File

@ -1,18 +1,6 @@
// #docplaster
// #docregion imports
import { Component, HostBinding } from '@angular/core';
import {
trigger,
state,
style,
animate,
transition,
// ...
} from '@angular/animations';
// #enddocregion imports
// #docregion decorator, toggle-app-animations
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
@ -21,15 +9,10 @@ import {
// animation triggers go here
]
})
// #enddocregion decorator
export class AppComponent {
@HostBinding('@.disabled')
public animationsDisabled = false;
// #enddocregion toggle-app-animations
@HostBinding('@.disabled') public animationsDisabled = false;
toggleAnimations() {
this.animationsDisabled = !this.animationsDisabled;
}
// #docregion toggle-app-animations
}
// #enddocregion toggle-app-animations

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

@ -16,7 +16,6 @@ import { Hero } from './hero';
@Component({
selector: 'app-hero-list-enter-leave',
// #docregion template
template: `
<ul class="heroes">
<li *ngFor="let hero of heroes"
@ -28,7 +27,6 @@ import { Hero } from './hero';
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['./hero-list-page.component.css'],
// #docregion animationdef
animations: [

3
aio/content/examples/animations/src/app/open-close.component.html
View File

@ -1,13 +1,10 @@
<!-- #docplaster -->
<nav>
<button (click)="toggle()">Toggle Open/Close</button>
</nav>
<!-- #docregion compare, trigger -->
<div [@openClose]="isOpen ? 'open' : 'closed'"
(@openClose.start)="onAnimationEvent($event)"
(@openClose.done)="onAnimationEvent($event)"
class="open-close-container">
<p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>
<!-- #enddocregion compare, trigger -->

11
aio/content/examples/animations/src/app/open-close.component.ts
View File

@ -5,7 +5,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
// #docregion component, events1
@Component({
selector: 'app-open-close',
// #docregion trigger, trigger-wildcard1, trigger-transition
// #docregion trigger-wildcard1, trigger-transition
animations: [
trigger('openClose', [
// #docregion state1
@ -33,7 +33,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
transition('closed => open', [
animate('0.5s')
]),
// #enddocregion transition2, trigger, component
// #enddocregion transition2, component
// #docregion trigger-wildcard1
transition('* => closed', [
animate('1s')
@ -54,15 +54,14 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
),
]),
// #enddocregion transition4
// #docregion transition3
transition('* => *', [
animate('1s')
]),
// #enddocregion transition3, trigger-transition
// #docregion trigger, component, trigger-wildcard1, events1
// #enddocregion trigger-transition
// #docregion component, trigger-wildcard1, events1
]),
],
// #enddocregion trigger, trigger-wildcard1
// #enddocregion trigger-wildcard1
templateUrl: 'open-close.component.html',
styleUrls: ['open-close.component.css']
})

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

@ -9,6 +9,4 @@ import { Component } from '@angular/core';
<app-sales-tax></app-sales-tax>
`
})
// #docregion export
export class AppComponent { }
// #enddocregion export

2
aio/content/examples/architecture/src/app/app.module.ts
View File

@ -22,13 +22,11 @@ import { Logger } from './logger.service';
HeroListComponent,
SalesTaxComponent
],
// #docregion providers
providers: [
BackendService,
HeroService,
Logger
],
// #enddocregion providers
bootstrap: [ AppComponent ]
})
// #docregion export

4
aio/content/examples/architecture/src/app/mini-app.ts
View File

@ -7,9 +7,7 @@ export class Logger {
log(message: string) { console.log(message); }
}
// #docregion import-core-component
import { Component } from '@angular/core';
// #enddocregion import-core-component
@Component({
selector: 'app-root',
@ -35,9 +33,7 @@ import { BrowserModule } from '@angular/platform-browser';
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
// #docregion export
export class AppModule { }
// #enddocregion export
// #enddocregion module
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

2
aio/content/examples/attribute-binding/src/app/app.component.html
View File

@ -1,7 +1,6 @@
<h1>Attribute, class, and style bindings</h1>
<h2>Attribute binding</h2>
<!-- #docregion attrib-binding-colspan -->
<table border=1>
<!-- #docregion colspan -->
<!-- expression calculates colspan=2 -->
@ -18,7 +17,6 @@
<tr><td>Five</td><td>Six</td></tr>
</table>
<!-- #enddocregion attrib-binding-colspan -->
<div>
<!-- #docregion attrib-binding-aria -->

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

@ -14,19 +14,14 @@ export class HighlightDirective {
constructor(private el: ElementRef) { }
// #enddocregion ctor
// #docregion mouse-methods, host
// #docregion mouse-methods
@HostListener('mouseenter') onMouseEnter() {
// #enddocregion host
this.highlight('yellow');
// #docregion host
}
@HostListener('mouseleave') onMouseLeave() {
// #enddocregion host
this.highlight(null);
// #docregion host
}
// #enddocregion host
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;

4
aio/content/examples/bootstrapping/src/app/app.module.ts
View File

@ -1,6 +1,4 @@
// #docplaster
// #docregion whole-ngmodule
// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@ -32,5 +30,3 @@ import { ItemDirective } from './item.directive';
bootstrap: [AppComponent]
})
export class AppModule { }
// #enddocregion whole-ngmodule

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

@ -1,7 +1,6 @@
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
// #docregion styleurls
@Component({
selector: 'app-hero-details',
template: `
@ -12,7 +11,5 @@ import { Hero } from './hero';
styleUrls: ['./hero-details.component.css']
})
export class HeroDetailsComponent {
// #enddocregion styleurls
@Input() hero: Hero;
// #docregion styleurls
}

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

@ -5,10 +5,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
// #docregion
@Component({
selector: 'app-quest-summary',
// #docregion urls
templateUrl: './quest-summary.component.html',
styleUrls: ['./quest-summary.component.css']
// #enddocregion urls
})
export class QuestSummaryComponent { }
// #enddocregion

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

@ -1,26 +1,18 @@
// #docregion
import { Component } from '@angular/core';
// #docregion import-services
import { LoggerService } from './logger.service';
import { UserContextService } from './user-context.service';
import { UserService } from './user.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
// #enddocregion import-services
private userId = 1;
// #docregion ctor
constructor(logger: LoggerService, public userContext: UserContextService) {
userContext.loadUser(this.userId);
logger.logInfo('AppComponent initialized');
}
// #enddocregion ctor
// #docregion import-services
}
// #enddocregion import-services

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

@ -8,9 +8,7 @@ import { LoggerService } from './logger.service';
@Injectable({
providedIn: 'root'
})
// #docregion date-logger-service-signature
export class DateLoggerService extends LoggerService
// #enddocregion date-logger-service-signature
{
logInfo(msg: any) { super.logInfo(stamp(msg)); }
logDebug(msg: any) { super.logInfo(stamp(msg)); }

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

@ -17,11 +17,9 @@ import { LoggerService } from './logger.service';
})
export class HeroBiosComponent {
// #enddocregion simple
// #docregion ctor
constructor(logger: LoggerService) {
logger.logInfo('Creating HeroBiosComponent');
}
// #enddocregion ctor
// #docregion simple
}
// #enddocregion simple
@ -36,9 +34,7 @@ export class HeroBiosComponent {
<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]
// #enddocregion class-provider
})
export class HeroBiosAndContactsComponent {
constructor(logger: LoggerService) {

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

@ -30,9 +30,7 @@ export class HeroContactComponent {
this.hasLogger = true;
loggerService.logInfo('HeroContactComponent can log!');
}
// #docregion ctor
}
// #enddocregion ctor
get phoneNumber() { return this.heroCache.hero.phone; }

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

@ -48,13 +48,11 @@ const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
export class HeroOfTheMonthComponent {
logs: string[] = [];
// #docregion ctor-signature
constructor(
logger: MinimalLogger,
public heroOfTheMonth: Hero,
@Inject(RUNNERS_UP) public runnersUp: string,
@Inject(TITLE) public title: string)
// #enddocregion ctor-signature
{
this.logs = logger.logs;
logger.logInfo('starting up');

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

@ -35,7 +35,6 @@ export function provideTheParent
///////// C - Child //////////
// #docregion carol
const templateC = `
<div class="c">
<h3>{{name}}</h3>
@ -54,7 +53,6 @@ export class CarolComponent {
// #enddocregion carol-ctor
}
// #enddocregion carol-class
// #enddocregion carol
@Component({
selector: 'chris',
@ -132,7 +130,7 @@ export class BethComponent implements Parent {
///////// A - Grandparent //////
// #docregion alex, alex-1
// #docregion alex-1
@Component({
selector: 'alex',
template: `
@ -157,11 +155,10 @@ export class AlexComponent extends Base
{
name = 'Alex';
}
// #enddocregion alex, alex-1
// #enddocregion alex-1
/////
// #docregion alice
@Component({
selector: 'alice',
template: `
@ -182,7 +179,6 @@ export class AliceComponent implements Parent
{
name = 'Alice';
}
// #enddocregion alice
////// Cathy ///////////
/**

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

@ -5,9 +5,7 @@ import { InjectionToken } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
// #docregion runners-up
export const RUNNERS_UP = new InjectionToken<string>('RunnersUp');
// #enddocregion runners-up
// #docregion factory-synopsis
export function runnersUpFactory(take: number) {

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

@ -6,7 +6,7 @@ import { Hero } from './hero';
import { HeroService } from './hero.service';
/////// HeroesBaseComponent /////
// #docregion heroes-base, injection
// #docregion heroes-base
@Component({
selector: 'app-unsorted-heroes',
template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
@ -14,7 +14,6 @@ import { HeroService } from './hero.service';
})
export class HeroesBaseComponent implements OnInit {
constructor(private heroService: HeroService) { }
// #enddocregion injection
heroes: Array<Hero>;
@ -26,9 +25,8 @@ export class HeroesBaseComponent implements OnInit {
// Post-process heroes in derived class override.
protected afterGetHeroes() {}
// #docregion injection
}
// #enddocregion heroes-base,injection
// #enddocregion heroes-base
/////// SortedHeroesComponent /////
// #docregion sorted-heroes

5
aio/content/examples/dependency-injection-in-action/src/app/storage.service.ts
View File

@ -1,14 +1,10 @@
// #docregion
import { Inject, Injectable, InjectionToken } from '@angular/core';
// #docregion storage-token
export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
providedIn: 'root',
factory: () => localStorage
});
// #enddocregion storage-token
// #docregion inject-storage-token
@Injectable({
providedIn: 'root'
})
@ -31,4 +27,3 @@ export class BrowserStorageService {
this.storage.clear();
}
}
// #enddocregion inject-storage-token

10
aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
View File

@ -1,27 +1,19 @@
// #docplaster
// #docregion
import { Injectable } from '@angular/core';
import { LoggerService } from './logger.service';
import { UserService } from './user.service';
// #docregion injectables, injectable
@Injectable({
providedIn: 'root'
})
export class UserContextService {
// #enddocregion injectables, injectable
name: string;
role: string;
loggedInSince: Date;
// #docregion ctor, injectables
constructor(private userService: UserService, private loggerService: LoggerService) {
// #enddocregion ctor, injectables
this.loggedInSince = new Date();
// #docregion ctor, injectables
}
// #enddocregion ctor, injectables
loadUser(userId: number) {
const user = this.userService.getUserById(userId);
@ -30,6 +22,4 @@ export class UserContextService {
this.loggerService.logDebug('loaded User');
}
// #docregion injectables, injectable
}
// #enddocregion injectables, injectable

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

@ -1,9 +1,6 @@
// #docregion
// #docregion imports
import { Component, Inject } from '@angular/core';
import { APP_CONFIG, AppConfig } from './app.config';
// #enddocregion imports
@Component({
selector: 'app-root',
@ -22,5 +19,3 @@ export class AppComponent {
}
// #enddocregion ctor
}
// #enddocregion

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

@ -1,11 +1,7 @@
// #docplaster
// #docregion
// #docregion imports
import { Component, Inject } from '@angular/core';
import { APP_CONFIG, AppConfig } from './app.config';
import { UserService } from './user.service';
// #enddocregion imports
@Component({
selector: 'app-root',
@ -28,13 +24,11 @@ import { UserService } from './user.service';
export class AppComponent {
title: string;
// #docregion ctor
constructor(
@Inject(APP_CONFIG) config: AppConfig,
private userService: UserService) {
this.title = config.title;
}
// #enddocregion ctor
get isAuthorized() { return this.user.isAuthorized; }
nextUser() { this.userService.getNewUser(); }

7
aio/content/examples/dependency-injection/src/app/app.module.ts
View File

@ -15,7 +15,6 @@ import { UserService } from './user.service';
import { ProvidersModule } from './providers.module';
// #docregion ngmodule
@NgModule({
imports: [
BrowserModule,
@ -25,14 +24,12 @@ import { ProvidersModule } from './providers.module';
AppComponent,
CarComponent,
HeroesComponent,
// #enddocregion ngmodule
HeroesTspComponent,
HeroListComponent,
InjectorComponent,
TestComponent
// #docregion ngmodule
],
// #docregion providers, providers-2
// #docregion providers
providers: [
// #enddocregion providers
Logger,
@ -40,7 +37,7 @@ import { ProvidersModule } from './providers.module';
UserService,
{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
],
// #enddocregion providers, providers-2
// #enddocregion providers
exports: [ CarComponent, HeroesComponent ],
bootstrap: [ AppComponent ]
})

11
aio/content/examples/dependency-injection/src/app/car/car-creations.ts
View File

@ -1,47 +1,36 @@
// Examples with car and engine variations
// #docplaster
import { Car, Engine, Tires } from './car';
///////// example 1 ////////////
export function simpleCar() {
// #docregion car-ctor-instantiation
// Simple car with 4 cylinders and Flintstone tires.
const car = new Car(new Engine(), new Tires());
// #enddocregion car-ctor-instantiation
car.description = 'Simple';
return car;
}
///////// example 2 ////////////
// #docregion car-ctor-instantiation-with-param
class Engine2 {
constructor(public cylinders: number) { }
}
// #enddocregion car-ctor-instantiation-with-param
export function superCar() {
// #docregion car-ctor-instantiation-with-param
// Super car with 12 cylinders and Flintstone tires.
const bigCylinders = 12;
const car = new Car(new Engine2(bigCylinders), new Tires());
// #enddocregion car-ctor-instantiation-with-param
car.description = 'Super';
return car;
}
/////////// example 3 //////////
// #docregion car-ctor-instantiation-with-mocks
class MockEngine extends Engine { cylinders = 8; }
class MockTires extends Tires { make = 'YokoGoodStone'; }
// #enddocregion car-ctor-instantiation-with-mocks
export function testCar() {
// #docregion car-ctor-instantiation-with-mocks
// Test car with 8 cylinders and YokoGoodStone tires.
const car = new Car(new MockEngine(), new MockTires());
// #enddocregion car-ctor-instantiation-with-mocks
car.description = 'Test';
return car;
}

7
aio/content/examples/dependency-injection/src/app/car/car-injector.ts
View File

@ -3,21 +3,16 @@ import { Injector } from '@angular/core';
import { Car, Engine, Tires } from './car';
import { Logger } from '../logger.service';
// #docregion injector
export function useInjector() {
let injector: Injector;
// #enddocregion injector
/*
// #docregion injector-no-new
// Cannot instantiate an Injector like this!
let injector = new Injector([
{ provide: Car, deps: [Engine, Tires] },
{ provide: Engine, deps: [] },
{ provide: Tires, deps: [] }
]);
// #enddocregion injector-no-new
*/
// #docregion injector, injector-create-and-call
injector = Injector.create({
providers: [
{ provide: Car, deps: [Engine, Tires] },
@ -25,9 +20,7 @@ export function useInjector() {
{ provide: Tires, deps: [] }
]
});
// #docregion injector-call
const car = injector.get(Car);
// #enddocregion injector-call, injector-create-and-call
car.description = 'Injector';
injector = Injector.create({

4
aio/content/examples/dependency-injection/src/app/car/car-no-di.ts
View File

@ -1,10 +1,8 @@
// Car without DI
import { Engine, Tires } from './car';
// #docregion car
export class Car {
// #docregion car-ctor
public engine: Engine;
public tires: Tires;
public description = 'No DI';
@ -13,7 +11,6 @@ export class Car {
this.engine = new Engine();
this.tires = new Tires();
}
// #enddocregion car-ctor
// Method using the engine and tires
drive() {
@ -21,4 +18,3 @@ export class Car {
`${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
}
}
// #enddocregion car

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

@ -11,11 +11,9 @@ export class Tires {
@Injectable()
export class Car {
// #docregion car-ctor
public description = 'DI';
constructor(public engine: Engine, public tires: Tires) { }
// #enddocregion car-ctor
// Method using the engine and tires
drive() {

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

@ -1,4 +1,3 @@
// #docregion
import { Component } from '@angular/core';
import { HEROES } from './mock-heroes';
@ -10,8 +9,6 @@ import { HEROES } from './mock-heroes';
</div>
`
})
// #docregion class
export class HeroListComponent {
heroes = HEROES;
}
// #enddocregion class

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

@ -22,9 +22,7 @@ import { HeroService } from './hero.service';
export class HeroListComponent {
heroes: Hero[];
// #docregion ctor
constructor(heroService: HeroService) {
this.heroes = heroService.getHeroes();
}
// #enddocregion ctor
}

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

@ -1,4 +1,3 @@
// #docregion
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
import { Logger } from '../logger.service';
@ -8,9 +7,7 @@ import { Logger } from '../logger.service';
})
export class HeroService {
// #docregion ctor
constructor(private logger: Logger) { }
// #enddocregion ctor
getHeroes() {
this.logger.log('Getting heroes ...');

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

@ -1,16 +1,10 @@
// #docplaster
// #docregion, v1
import { Component } from '@angular/core';
// #enddocregion v1
import { HeroService } from './hero.service';
// #docregion v1
@Component({
selector: 'app-heroes',
// #enddocregion v1
providers: [ HeroService ],
// #docregion v1
template: `
<h2>Heroes</h2>
<app-hero-list></app-hero-list>

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

@ -8,7 +8,6 @@ import { HeroService } from './heroes/hero.service';
import { heroServiceProvider } from './heroes/hero.service.provider';
import { Logger } from './logger.service';
// #docregion injector
@Component({
selector: 'app-injectors',
template: `
@ -40,7 +39,6 @@ export class InjectorComponent implements OnInit {
return this.injector.get(ROUS, rousDontExist);
}
}
// #enddocregion injector
/**
* R.O.U.S. - Rodents Of Unusual Size

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

@ -19,9 +19,9 @@ const template = '{{log}}';
@Component({
selector: 'provider-1',
template,
// #docregion providers-1, providers-logger
// #docregion providers-logger
providers: [Logger]
// #enddocregion providers-1, providers-logger
// #enddocregion providers-logger
})
export class Provider1Component {
log: string;
@ -114,11 +114,9 @@ export class OldLogger {
selector: 'provider-6a',
template,
providers:
// #docregion providers-6a
[ NewLogger,
// Not aliased! Creates two instances of `NewLogger`
{ provide: OldLogger, useClass: NewLogger}]
// #enddocregion providers-6a
})
export class Provider6aComponent {
log: string;
@ -193,9 +191,7 @@ export class Provider8Component {
// must be true else this component would have blown up at runtime
log = 'Hero service injected successfully via heroServiceProvider';
// #docregion provider-8-ctor
constructor(heroService: HeroService) { }
// #enddocregion provider-8-ctor
}
/////////////////
@ -221,9 +217,7 @@ export class Provider9Component implements OnInit {
constructor(private config: AppConfig){ }
// #enddocregion provider-9-ctor-interface
*/
// #docregion provider-9-ctor
constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
// #enddocregion provider-9-ctor
ngOnInit() {
this.log = 'APP_CONFIG Application title is ' + this.config.title;
@ -233,9 +227,7 @@ export class Provider9Component implements OnInit {
//////////////////////////////////////////
// Sample providers 1 to 7 illustrate a required logger dependency.
// Optional logger, can be null
// #docregion import-optional
import { Optional } from '@angular/core';
// #enddocregion import-optional
const someMessage = 'Hello from the injected logger';
@ -246,13 +238,11 @@ const someMessage = 'Hello from the injected logger';
})
export class Provider10Component implements OnInit {
log: string;
// #docregion provider-10-ctor
constructor(@Optional() private logger?: Logger) {
if (this.logger) {
this.logger.log(someMessage);
}
}
// #enddocregion provider-10-ctor
ngOnInit() {
this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available';

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

@ -22,7 +22,6 @@ export class TestComponent {
/////////////////////////////////////
function runTests() {
// #docregion spec
const expectedHeroes = [{name: 'A'}, {name: 'B'}]
const mockService = <HeroService> {getHeroes: () => expectedHeroes }
@ -31,7 +30,6 @@ function runTests() {
const component = new HeroListComponent(mockService);
expect(component.heroes.length).toEqual(expectedHeroes.length);
});
// #enddocregion spec
return testResults;
}

2
aio/content/examples/dependency-injection/src/main.ts
View File

@ -8,6 +8,4 @@ if (environment.production) {
enableProdMode();
}
// #docregion bootstrap
platformBrowserDynamic().bootstrapModule(AppModule);
// #enddocregion bootstrap

1
aio/content/examples/displaying-data/src/app/app-ctor.component.1.ts
View File

@ -7,7 +7,6 @@ import { Component } from '@angular/core';
<h2>My favorite hero is: {{myHero}}</h2>
`
})
// #docregion class
export class AppComponent {
title: string;
myHero: string;

3
aio/content/examples/displaying-data/src/app/app.component.1.ts
View File

@ -1,14 +1,11 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// #docregion template
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
// #enddocregion template
})
export class AppComponent {
title = 'Tour of Heroes';

6
aio/content/examples/displaying-data/src/app/app.component.2.ts
View File

@ -1,24 +1,18 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// #docregion template
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
// #docregion li
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
// #enddocregion li
</ul>
`
// #enddocregion template
})
// #docregion class
export class AppComponent {
title = 'Tour of Heroes';
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

8
aio/content/examples/displaying-data/src/app/app.component.3.ts
View File

@ -1,13 +1,9 @@
// #docregion
import { Component } from '@angular/core';
// #docregion import
import { Hero } from './hero';
// #enddocregion import
@Component({
selector: 'app-root',
// #docregion template
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero.name}}</h2>
@ -18,12 +14,9 @@ import { Hero } from './hero';
</li>
</ul>
`
// #enddocregion template
})
// #docregion class
export class AppComponent {
title = 'Tour of Heroes';
// #docregion heroes
heroes = [
new Hero(1, 'Windstorm'),
new Hero(13, 'Bombasto'),
@ -31,5 +24,4 @@ export class AppComponent {
new Hero(20, 'Tornado')
];
myHero = this.heroes[0];
// #enddocregion heroes
}

4
aio/content/examples/displaying-data/src/app/app.component.ts
View File

@ -1,5 +1,3 @@
// #docplaster
// #docregion final
import { Component } from '@angular/core';
import { Hero } from './hero';
@ -15,9 +13,7 @@ import { Hero } from './hero';
{{ hero.name }}
</li>
</ul>
// #docregion message
<p *ngIf="heroes.length > 3">There are many heroes!</p>
// #enddocregion message
`
})
export class AppComponent {

4
aio/content/examples/displaying-data/src/app/hero.ts
View File

@ -1,9 +1,5 @@
// #docregion
export class Hero {
constructor(
// #docregion id
public id: number,
// #enddocregion id
public name: string) { }
}
// #enddocregion

3
aio/content/examples/displaying-data/src/index.html
View File

@ -7,10 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- #docregion body -->
<body>
<app-root></app-root>
</body>
<!-- #enddocregion body -->
</html>

4
aio/content/examples/docs-style-guide/src/app/app.component.html
View File

@ -1,5 +1,3 @@
<!-- #docplaster -->
<!-- #docregion -->
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
@ -14,8 +12,6 @@
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<!-- #docregion selected-hero -->
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
<!-- #enddocregion selected-hero -->
</div>
</div>

3
aio/content/examples/dynamic-component-loader/src/app/app.module.ts
View File

@ -1,4 +1,3 @@
// #docregion
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@ -16,9 +15,7 @@ import { AdService } from './ad.service';
HeroJobAdComponent,
HeroProfileComponent,
AdDirective ],
// #docregion entry-components
entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
// #enddocregion entry-components
bootstrap: [ AppComponent ]
})
export class AppModule {

4
aio/content/examples/event-binding/src/app/app.component.html
View File

@ -2,13 +2,9 @@
<div class="group">
<h3>Target event</h3>
<!-- #docregion event-binding-1 -->
<button (click)="onSave($event)">Save</button>
<!-- #enddocregion event-binding-1 -->
<!-- #docregion event-binding-2 -->
<button on-click="onSave($event)">on-click Save</button>
<!-- #enddocregion event-binding-2 -->
<!-- #docregion custom-directive -->
<h4>myClick is an event on the custom ClickDirective:</h4>

8
aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
View File

@ -1,15 +1,10 @@
// #docplaster
// #docregion customer-dashboard
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// #enddocregion customer-dashboard
// #docregion customer-dashboard-component
// import the new component
import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
// #enddocregion customer-dashboard-component
// #docregion customer-dashboard-component
@NgModule({
imports: [
CommonModule
@ -28,7 +23,4 @@ import { CustomerDashboardComponent } from './customer-dashboard/customer-dashbo
// #enddocregion customer-dashboard-component
// #docregion customer-dashboard
export class CustomerDashboardModule { }
// #enddocregion customer-dashboard

4
aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
View File

@ -20,7 +20,6 @@ export class HeroFormReactiveComponent implements OnInit {
heroForm: FormGroup;
ngOnInit(): void {
// #docregion async-validation
this.heroForm = new FormGroup({
name: new FormControl(this.hero.name, [
Validators.required,
@ -33,7 +32,6 @@ export class HeroFormReactiveComponent implements OnInit {
}),
power: new FormControl(this.hero.power, Validators.required)
});
// #enddocregion async-validation
}
get name() { return this.heroForm.get('name'); }
@ -42,7 +40,5 @@ export class HeroFormReactiveComponent implements OnInit {
get alterEgo() { return this.heroForm.get('alterEgo'); }
// #docregion async-validation
constructor(private alterEgoValidator: UniqueAlterEgoValidator) {}
// #enddocregion async-validation
}

2
aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css
View File

@ -1,5 +1,3 @@
/* #docregion cross-validation-error-css */
.cross-validation-error input {
border-left: 5px solid red;
}
/* #enddocregion cross-validation-error-css */

2
aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts
View File

@ -25,7 +25,6 @@ export class UniqueAlterEgoValidator implements AsyncValidator {
}
// #enddocregion async-validator
// #docregion async-validator-directive
@Directive({
selector: '[appUniqueAlterEgo]',
providers: [
@ -43,4 +42,3 @@ export class UniqueAlterEgoValidatorDirective {
this.validator.validate(control);
}
}
// #enddocregion async-validator-directive

2
aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
View File

@ -35,13 +35,11 @@
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<!-- #docregion async-validation -->
<input id="alterEgo" class="form-control" name="alterEgo"
#alterEgo="ngModel"
[(ngModel)]="hero.alterEgo"
[ngModelOptions]="{ updateOn: 'blur' }"
appUniqueAlterEgo>
<!-- #enddocregion async-validation -->
<div *ngIf="alterEgo.pending">Validating...</div>
<div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">

4
aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
View File

@ -1,9 +1,6 @@
/* tslint:disable: member-ordering */
// #docplaster
// #docregion
import { Component } from '@angular/core';
// #docregion component
@Component({
selector: 'app-hero-form-template',
templateUrl: './hero-form-template.component.html',
@ -16,4 +13,3 @@ export class HeroFormTemplateComponent {
hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
}
// #enddocregion

10
aio/content/examples/forms/src/app/hero-form/hero-form.component.html
View File

@ -102,7 +102,6 @@
<!-- ==================================================== -->
<hr>
<!-- #docregion phase1-->
<style>
.no-style .ng-valid {
border-left: 1px solid #CCC
@ -113,7 +112,6 @@
}
</style>
<div class="no-style" style="margin-left: 4px">
<!-- #docregion start -->
<div class="container">
<h1>Hero Form</h1>
<form>
@ -127,7 +125,6 @@
<input type="text" class="form-control" id="alterEgo">
</div>
<!-- #enddocregion start -->
<!-- #docregion powers -->
<div class="form-group">
<label for="power">Hero Power</label>
@ -137,17 +134,13 @@
</div>
<!-- #enddocregion powers -->
<!-- #docregion start -->
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
<!-- #enddocregion start -->
<!-- #enddocregion phase1-->
<!-- ==================================================== -->
<hr>
<!-- #docregion phase2-->
<div class="container">
<h1>Hero Form</h1>
<!-- #docregion template-variable-->
@ -182,7 +175,6 @@
</form>
</div>
<!-- #enddocregion phase2-->
<!-- EXTRA MATERIAL FOR DOCUMENTATION -->
<hr>
@ -193,11 +185,9 @@
TODO: remove this: {{model.name}}
<!-- #enddocregion ngModelName-1 -->
<hr>
<!-- #docregion ngModel-3-->
<input type="text" class="form-control" id="name"
required
[ngModel]="model.name" name="name"
(ngModelChange)="model.name = $event">
TODO: remove this: {{model.name}}
<!-- #enddocregion ngModel-3-->
</div>

2
aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
View File

@ -49,9 +49,7 @@ export class HeroFormComponent {
// Name via form.controls = {{showFormControls(heroForm)}}
showFormControls(form: any) {
return form && form.controls.name &&
// #docregion form-controls
form.controls.name.value; // Dr. IQ
// #enddocregion form-controls
}
/////////////////////////////

2
aio/content/examples/forms/src/index.html
View File

@ -7,10 +7,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- #docregion bootstrap -->
<link rel="stylesheet"
href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<!-- #enddocregion bootstrap -->
<!-- #docregion styles -->
<link rel="stylesheet" href="assets/forms.css">
<!-- #enddocregion styles -->

3
aio/content/examples/getting-started/src/app/cart.service.1.ts
View File

@ -1,8 +1,5 @@
// #docplaster
// #docregion
import { Injectable } from '@angular/core';
// #docregion v1
@Injectable({
providedIn: 'root'
})

2
aio/content/examples/getting-started/src/app/cart/cart.component.2.ts
View File

@ -9,7 +9,7 @@ import { CartService } from '../cart.service';
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
// #docregion inject-cart, items, submit
// #docregion inject-cart, items
export class CartComponent {
// #enddocregion inject-cart
items = this.cartService.getItems();

4
aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
View File

@ -1,15 +1,11 @@
// #docplaster
// #docregion imports
import { Component, OnInit } from '@angular/core';
import { CartService } from '../cart.service';
// #enddocregion imports
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
// #docregion props-services, submit
export class CartComponent implements OnInit {
items;

6
aio/content/examples/getting-started/src/app/cart/cart.component.ts
View File

@ -11,7 +11,7 @@ import { CartService } from '../cart.service';
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
// #docregion props-services, submit, inject-form-builder, checkout-form, checkout-form-group
// #docregion inject-form-builder, checkout-form-group
export class CartComponent {
// #enddocregion inject-form-builder
items = this.cartService.getItems();
@ -19,7 +19,6 @@ export class CartComponent {
name: '',
address: ''
});
// #enddocregion checkout-form
// #docregion inject-form-builder
constructor(
private cartService: CartService,
@ -27,12 +26,11 @@ export class CartComponent {
) {}
// #enddocregion inject-form-builder, checkout-form-group
// #enddocregion props-services
onSubmit(): void {
// Process checkout data here
this.items = this.cartService.clearCart();
console.warn('Your order has been submitted', this.checkoutForm.value);
this.checkoutForm.reset();
}
// #docregion props-services, inject-form-builder, checkout-form, checkout-form-group
// #docregion inject-form-builder, checkout-form-group
}

12
aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
View File

@ -1,10 +1,9 @@
// #docplaster
// #docregion imports, cart-service
// #docregion cart-service
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { products } from '../products';
// #enddocregion imports
import { CartService } from '../cart.service';
// #enddocregion cart-service
@ -13,7 +12,7 @@ import { CartService } from '../cart.service';
templateUrl: './product-details.component.html',
styleUrls: ['./product-details.component.css']
})
// #docregion props-methods, inject-cart-service, add-to-cart
// #docregion inject-cart-service, add-to-cart
export class ProductDetailsComponent implements OnInit {
// #enddocregion add-to-cart, inject-cart-service
product;
@ -21,28 +20,23 @@ export class ProductDetailsComponent implements OnInit {
// #docregion inject-cart-service
constructor(
private route: ActivatedRoute,
// #enddocregion props-methods
private cartService: CartService
// #docregion props-methods
) { }
// #enddocregion inject-cart-service
ngOnInit() {
// #enddocregion props-methods
// First get the product id from the current route.
const routeParams = this.route.snapshot.paramMap;
const productIdFromRoute = Number(routeParams.get('productId'));
// Find the product that correspond with the id provided in route.
this.product = products.find(product => product.id === productIdFromRoute);
// #docregion props-methods
}
// #enddocregion props-methods
// #docregion add-to-cart
addToCart(product) {
this.cartService.addToCart(product);
window.alert('Your product has been added to the cart!');
}
// #docregion props-methods, inject-cart-service
// #docregion inject-cart-service
}

2
aio/content/examples/getting-started/src/app/product-list/product-list.component.5.html
View File

@ -2,13 +2,11 @@
<div *ngFor="let product of products">
<!-- #docregion product-details -->
<h3>
<a [title]="product.name + ' details'">
{{ product.name }}
</a>
</h3>
<!-- #enddocregion product-details -->
<p *ngIf="product.description">
Description: {{ product.description }}

2
aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
View File

@ -10,7 +10,7 @@ import { CartService } from '../cart.service';
templateUrl: './shipping.component.html',
styleUrls: ['./shipping.component.css']
})
// #docregion props, ctor
// #docregion props
export class ShippingComponent {
shippingCosts = this.cartService.getShippingPrices();
// #enddocregion props

9
aio/content/examples/http/src/app/config/config.component.ts
View File

@ -25,7 +25,7 @@ export class ConfigComponent {
this.headers = undefined;
}
// #docregion v1, v2, v3
// #docregion v1, v2
showConfig() {
this.configService.getConfig()
// #enddocregion v1, v2
@ -34,25 +34,22 @@ export class ConfigComponent {
error => this.error = error // error path
);
}
// #enddocregion v3
showConfig_v1() {
this.configService.getConfig_1()
// #docregion v1, v1_callback
// #docregion v1
.subscribe((data: Config) => this.config = {
heroesUrl: data.heroesUrl,
textfile: data.textfile
});
// #enddocregion v1_callback
}
// #enddocregion v1
showConfig_v2() {
this.configService.getConfig()
// #docregion v2, v2_callback
// #docregion v2
// clone the data object, using its known Config shape
.subscribe((data: Config) => this.config = { ...data });
// #enddocregion v2_callback
}
// #enddocregion v2

6
aio/content/examples/http/src/app/heroes/heroes.component.html
View File

@ -1,5 +1,4 @@
<h3>Heroes</h3>
<!-- #docregion add -->
<div>
<label>Hero name:
<input #heroName />
@ -12,9 +11,7 @@
search
</button>
</div>
<!-- #enddocregion add -->
<!-- #docregion list -->
<ul class="heroes">
<li *ngFor="let hero of heroes">
<a (click)="edit(hero)">
@ -23,10 +20,7 @@
<input *ngIf="hero===editHero" [(ngModel)]="hero.name"
(blur)="update()" (keyup.enter)="update()">
</a>
<!-- #docregion delete -->
<button class="delete" title="delete hero"
(click)="delete(hero)">x</button>
<!-- #enddocregion delete -->
</li>
</ul>
<!-- #enddocregion list -->

2
aio/content/examples/http/src/app/request-cache.service.ts
View File

@ -9,12 +9,10 @@ export interface RequestCacheEntry {
lastRead: number;
}
// #docregion request-cache
export abstract class RequestCache {
abstract get(req: HttpRequest<any>): HttpResponse<any> | undefined;
abstract put(req: HttpRequest<any>, response: HttpResponse<any>): void;
}
// #enddocregion request-cache
const maxAge = 30000; // maximum cache age (ms)

2
aio/content/examples/i18n/doc-files/app.locale_data.ts
View File

@ -1,7 +1,5 @@
// #docregion import-locale
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
// the second parameter 'fr-FR' is optional
registerLocaleData(localeFr, 'fr-FR');
// #enddocregion import-locale

4
aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
View File

@ -1,7 +1,5 @@
// #docregion import-locale-extra
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
// #enddocregion import-locale-extra

2
aio/content/examples/i18n/src/app/app.component.html
View File

@ -1,9 +1,7 @@
<!--#docregion-->
<!--#docregion i18n-attribute-meaning-->
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">
Hello i18n!
</h1>
<!--#enddocregion i18n-attribute-meaning-->
<!--#docregion i18n-ng-container-->
<ng-container i18n>I don't output any element</ng-container>

4
aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
View File

@ -5,12 +5,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
selector: 'app-aliasing',
templateUrl: './aliasing.component.html',
styleUrls: ['./aliasing.component.css'],
// #docregion alias
// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
inputs: ['input1: saveForLaterItem'], // propertyName:alias
outputs: ['outputEvent1: saveForLaterEvent']
// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
// #enddocregion alias
})
export class AliasingComponent {
@ -18,10 +16,8 @@ export class AliasingComponent {
input1: string;
outputEvent1: EventEmitter<string> = new EventEmitter<string>();
// #docregion alias-input-output
@Input('wishListItem') input2: string; // @Input(alias)
@Output('wishEvent') outputEvent2 = new EventEmitter<string>(); // @Output(alias) propertyName = ...
// #enddocregion alias-input-output
saveIt() {

4
aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts
View File

@ -1,18 +1,16 @@
/* tslint:disable:use-input-property-decorator */
/* tslint:disable:use-output-property-decorator */
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
@Component({
selector: 'app-in-the-metadata',
templateUrl: './in-the-metadata.component.html',
styleUrls: ['./in-the-metadata.component.css'],
// #docregion metadata
// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
inputs: ['clearanceItem'],
outputs: ['buyEvent']
// tslint:enable: no-inputs-metadata-property no-outputs-metadata-property
// #enddocregion metadata
})
export class InTheMetadataComponent {

6
aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts
View File

@ -6,20 +6,14 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
styleUrls: ['./input-output.component.css']
})
export class InputOutputComponent {
// #docregion input-output
@Input() item: string;
// #docregion output
@Output() deleteRequest = new EventEmitter<string>();
// #enddocregion output
// #enddocregion input-output
lineThrough = '';
// #docregion delete-method
delete() {
console.warn('Child says: emiting item deleteRequest with', this.item);
this.deleteRequest.emit(this.item);
this.lineThrough = this.lineThrough ? '' : 'line-through';
}
// #enddocregion delete-method
}

2
aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts
View File

@ -1,6 +1,4 @@
// #docregion imports
import { Component, Output, EventEmitter } from '@angular/core';
// #enddocregion imports
@Component({
selector: 'app-item-output',

2
aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
View File

@ -1,5 +1,4 @@
// #docplaster
// #docregion app-routing-module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@ -33,4 +32,3 @@ const routes: Routes = [
providers: []
})
export class AppRoutingModule { }
// #enddocregion app-routing-module

2
aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
View File

@ -1,5 +1,4 @@
// #docplaster
// #docregion orders-routing-module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@ -19,4 +18,3 @@ const routes: Routes = [
exports: [RouterModule]
})
export class OrdersRoutingModule { }
// #enddocregion orders-routing-module

1
aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
View File

@ -50,7 +50,6 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
}
}
// #enddocregion hooks
// #docregion do-something
// This surrogate for real business logic sets the `comment`
private doSomething() {

2
aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
View File

@ -7,7 +7,5 @@
</table>
<p><button (click)="reset()">Reset Log</button></p>
<!-- #docregion do-check -->
<do-check [hero]="hero" [power]="power"></do-check>
<!-- #enddocregion do-check -->
</div>

3
aio/content/examples/ngcontainer/src/app/app.component.css
View File

@ -1,4 +1,3 @@
/* #docregion */
button {
min-width: 100px;
font-size: 100%;
@ -31,9 +30,7 @@ th {
vertical-align: top;
}
/* #docregion p-span */
p span {
color: red;
font-size: 70%;
}
/* #enddocregion p-span */

34
aio/content/examples/ngcontainer/src/app/app.component.html
View File

@ -2,9 +2,7 @@
<!-- #docregion -->
<h1>&lt;ng-container&gt;</h1>
<!-- #docregion ngif -->
<div *ngIf="hero">{{hero.name}}</div>
<!-- #enddocregion ngif -->
<hr>
@ -14,7 +12,6 @@
<button (click)="hero = hero ? null : heroes[0]">Toggle hero</button>
<h4>#1 &lt;ng-container&gt; and &lt;p&gt;</h4>
<!-- #docregion ngif-ngcontainer -->
<p>
I turned the corner
<ng-container *ngIf="hero">
@ -22,8 +19,6 @@
</ng-container>
and continued on my way.
</p>
<!-- #enddocregion ngif-ngcontainer -->
<!-- #docregion ngif-span -->
<p>
I turned the corner
<span *ngIf="hero">
@ -31,12 +26,10 @@
</span>
and continued on my way.
</p>
<!-- #enddocregion ngif-span -->
<h4>#2 &lt;ng-container&gt; and &lt;p&gt;</h4>
<div *ngIf="hero">
<!-- #docregion ngif-ngcontainer-2 -->
<p>
{{hero.name}} is
<ng-container *ngFor="let trait of heroTraits; let first=first; let last=last">
@ -45,9 +38,7 @@
{{trait}}
</ng-container>.
</p>
<!-- #enddocregion ngif-ngcontainer-2 -->
<!-- #docregion ngif-span-2 -->
<p>
{{hero.name}} is
<span *ngFor="let trait of heroTraits; let first=first; let last=last">
@ -56,28 +47,23 @@
{{trait}}
</span>.
</p>
<!-- #enddocregion ngif-span-2 -->
<br>
<h4>#3 &lt;ng-container&gt; and &lt;p&gt;</h4>
<!-- #docregion ngif-span-3 -->
<p>
<label><input type="checkbox" [checked]="showId" (change)="showId=!showId">Show ID</label>
</p>
<!-- #enddocregion ngif-span-3 -->
<div>
The <code>hero.id</code> in the &lt;span&gt;
is caught by the <span>p-span</span> CSS:
<!-- #docregion ngif-span-3 -->
<p>
<span *ngIf="showId">
Id: ({{hero.id}})
</span>
Name: {{hero.name}}
</p>
<!-- #enddocregion ngif-span-3 -->
</div>
<div>
@ -129,7 +115,6 @@
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
</div>
<!-- #docregion select-span -->
<select [(ngModel)]="hero">
<span *ngFor="let h of heroes">
<span *ngIf="showSad || h?.emotion !== 'sad'">
@ -137,14 +122,12 @@
</span>
</span>
</select>
<!-- #enddocregion select-span -->
<p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
</div>
<!-- #docregion select-ngcontainer -->
<select [(ngModel)]="hero">
<ng-container *ngFor="let h of heroes">
<ng-container *ngIf="showSad || h?.emotion !== 'sad'">
@ -152,7 +135,6 @@
</ng-container>
</ng-container>
</select>
<!-- #enddocregion select-ngcontainer -->
<br><br><br><br>
@ -168,7 +150,6 @@
<p>Options with &lt;ng-container&gt;</p>
<select #traitPicker>
<!-- #docregion select-ngcontainer-2 -->
<ng-container *ngIf="showDefaultTraits">
<!-- Default traits -->
<option value="loyal">LOYAL</option>
@ -178,12 +159,10 @@
<option *ngFor="let trait of heroTraits" [value]="trait">
{{ trait | uppercase }}
</option>
<!-- #enddocregion select-ngcontainer-2 -->
</select>
<p>Options with &lt;span&gt;</p>
<!-- #docregion select-span-2 -->
<select>
<!-- Default traits are always excluded because intermediate <span> is illegal -->
<span *ngIf="showDefaultTraits">
@ -195,7 +174,6 @@
{{ trait | uppercase }}
</option>
</select>
<!-- #enddocregion select-span-2 -->
<br>
@ -218,7 +196,6 @@
</tr>
<ng-container *ngIf="divNgIf">
<!-- #docregion ngif-div -->
<div *ngIf="strucDirs">
<tr>
<td>xxx</td><td>S</td><td>div with *ngIf formats crazy.</td>
@ -227,10 +204,8 @@
<td>yyy</td><td>S</td><td>div with *ngIf formats crazy.</td>
</tr>
</div>
<!-- #enddocregion ngif-div -->
</ng-container>
<!-- #docregion ngif-ngcontainer-4 -->
<ng-container *ngIf="strucDirs">
<tr>
<td>NgFor</td><td>S</td><td>Repeat the template for each item in a list.</td>
@ -239,7 +214,6 @@
<td>NgIf</td><td>S</td><td>Add or remove DOM elements.</td>
</tr>
</ng-container>
<!-- #enddocregion ngif-ngcontainer-4 -->
<ng-container *ngIf="attrDirs">
<tr>
@ -247,11 +221,9 @@
</tr>
</ng-container>
<!-- #docregion ngif-tr -->
<tr *ngIf="strucDirs">
<td>NgSwitch</td><td>S</td><td>Include in DOM if case matches the switch value.</td>
</tr>
<!-- #enddocregion ngif-tr -->
</table>
@ -260,20 +232,14 @@
<h3>Do not confuse &lt;ng-container&gt; with &lt;ng-content&gt;</h3>
<p>&lt;ng-container&gt;Inside ng-container&lt;/ng-container&gt;</p>
<!-- #docregion ngcontainer-bare -->
<ng-container>Inside ng-container</ng-container>
<!-- #enddocregion ngcontainer-bare -->
<p>&lt;ng-content&gt;this is an Angular parse error&lt;/ng-content&gt;</p>
<!-- #docregion ngcontent-bad -->
<!-- <ng-content>this is an Angular parse error</ng-content> -->
<!-- #enddocregion ngcontent-bad -->
<div class="code">Template parse errors:<br>
&lt;ng-content&gt; element cannot have content.</div>
<p>Demo of &lt;/ng-content&gt;</p>
<!-- #docregion content-comp -->
<content-comp>
Projected content
</content-comp>
<!-- #enddocregion content-comp -->

3
aio/content/examples/ngcontainer/src/app/content.component.ts
View File

@ -1,14 +1,11 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'content-comp',
// #docregion template
template:
`<div>
<ng-content></ng-content>
</div>`,
// #enddocregion template
styles: [ `
div { border: medium dashed green; padding: 1em; width: 150px; text-align: center}
`]

2
aio/content/examples/pipes/src/app/app.component.html
View File

@ -51,10 +51,8 @@
<!-- #enddocregion chained-parameter-birthday -->
</p>
<p>
<!-- #docregion chained-parameter-birthday-parens -->
The chained hero's birthday is
{{ ( birthday | date:'fullDate' ) | uppercase}}
<!-- #enddocregion chained-parameter-birthday-parens -->
</p>
<hr>
<a id="power-booster"></a>

3
aio/content/examples/pipes/src/app/fetch-json.pipe.ts
View File

@ -1,13 +1,10 @@
// #docregion
import { HttpClient } from '@angular/common/http';
import { Pipe, PipeTransform } from '@angular/core';
// #docregion pipe-metadata
@Pipe({
name: 'fetch',
pure: false
})
// #enddocregion pipe-metadata
export class FetchJsonPipe implements PipeTransform {
private cachedData: any = null;
private cachedUrl = '';

8
aio/content/examples/pipes/src/app/flying-heroes-impure.component.html
View File

@ -2,19 +2,15 @@
<!-- #docregion -->
<h2>{{title}}</h2>
<p>
<!-- #docregion template-1 -->
New hero:
<input type="text" #box
(keyup.enter)="addHero(box.value); box.value=''"
placeholder="hero name">
<!-- #enddocregion template-1 -->
<input id="can-fly" type="checkbox" [(ngModel)]="canFly"> can fly
</p>
<p>
<input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
<!-- #docregion template-1 -->
<button (click)="reset()">Reset</button>
<!-- #enddocregion template-1 -->
</p>
<h4>Heroes who fly (piped)</h4>
@ -28,11 +24,7 @@ New hero:
<h4>All Heroes (no pipe)</h4>
<div id="all">
<!-- #docregion template-1 -->
<!-- #docregion template-all-heroes -->
<div *ngFor="let hero of heroes">
{{hero.name}}
</div>
<!-- #enddocregion template-all-heroes -->
<!-- #enddocregion template-1 -->
</div>

2
aio/content/examples/pipes/src/app/flying-heroes.component.html
View File

@ -29,10 +29,8 @@ New hero:
<h4>All Heroes (no pipe)</h4>
<div id="all">
<!-- #docregion template-1 -->
<!-- #docregion template-all-heroes -->
<div *ngFor="let hero of heroes">
{{hero.name}}
</div>
<!-- #enddocregion template-all-heroes -->
<!-- #enddocregion template-1 -->
</div>

6
aio/content/examples/pipes/src/app/flying-heroes.component.ts
View File

@ -35,9 +35,7 @@ export class FlyingHeroesComponent {
// #enddocregion v1
} else {
// Pipe updates display because heroes array is a new object
// #docregion concat
this.heroes = this.heroes.concat(hero);
// #enddocregion concat
}
// #docregion v1
}
@ -47,15 +45,11 @@ export class FlyingHeroesComponent {
// #enddocregion v1
////// Identical except for impure pipe //////
// #docregion impure-component
@Component({
selector: 'app-flying-heroes-impure',
templateUrl: './flying-heroes-impure.component.html',
// #enddocregion impure-component
styles: ['.flyers, .all {font-style: italic}'],
// #docregion impure-component
})
export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
title = 'Flying Heroes (impure pipe)';
}
// #enddocregion impure-component

3
aio/content/examples/pipes/src/app/hero-birthday1.component.ts
View File

@ -1,11 +1,8 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'app-hero-birthday',
// #docregion hero-birthday-template
template: `<p>The hero's birthday is {{ birthday | date }}</p>`
// #enddocregion hero-birthday-template
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based

6
aio/content/examples/property-binding/src/app/app.component.html
View File

@ -7,18 +7,14 @@
<img [src]="itemImageUrl">
<!-- #enddocregion property-binding -->
<h2>Using bind- syntax:</h2>
<!-- #docregion bind-prefix -->
<img bind-src="itemImageUrl">
<!-- #enddocregion bind-prefix -->
<hr />
<h2>Binding to the colSpan property</h2>
<table border=1>
<tr><td>Column 1</td><td>Column 2</td></tr>
<!-- #docregion colSpan -->
<!-- Notice the colSpan property is camel case -->
<tr><td [colSpan]="2">Span 2 columns</td></tr>
<!-- #enddocregion colSpan -->
</table>
@ -51,9 +47,7 @@
<hr />
<h2>Initialized string:</h2>
<!-- #docregion string-init -->
<app-string-init prefix="This is a one-time initialized string."></app-string-init>
<!-- #enddocregion string-init -->
<hr />

7
aio/content/examples/reactive-forms/src/app/app.component.html
View File

@ -1,17 +1,10 @@
<!-- #docplaster -->
<!-- #docregion app-name-editor -->
<h1>Reactive Forms</h1>
<!-- #enddocregion app-name-editor -->
<nav>
<a (click)="toggleEditor('name')">Name Editor</a>
<a (click)="toggleEditor('profile')">Profile Editor</a>
</nav>
<!-- #docregion app-name-editor -->
<app-name-editor *ngIf="showNameEditor"></app-name-editor>
<!-- #enddocregion app-name-editor -->
<!-- #docregion app-profile-editor -->
<app-profile-editor *ngIf="showProfileEditor"></app-profile-editor>
<!-- #enddocregion app-profile-editor -->

2
aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
View File

@ -39,7 +39,6 @@
</div>
<!-- #enddocregion formgroupname -->
<!-- #docregion formarrayname -->
<div formArrayName="aliases">
<h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
@ -51,7 +50,6 @@
</label>
</div>
</div>
<!-- #enddocregion formarrayname -->
<!-- #docregion formgroup -->
</form>
<!-- #enddocregion formgroup -->

5
aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
View File

@ -59,12 +59,9 @@
<hr>
<!-- #docregion display-value -->
<p>
Form Value: {{ profileForm.value | json }}
</p>
<!-- #enddocregion display-value -->
<!-- #docregion display-status -->
@ -73,8 +70,6 @@
</p>
<!-- #enddocregion display-status -->
<!-- #docregion patch-value -->
<p>
<button (click)="updateProfile()">Update Profile</button>
</p>
<!-- #enddocregion patch-value -->

17
aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
View File

@ -1,15 +1,10 @@
// #docplaster
// #docregion form-builder
import { Component } from '@angular/core';
// #docregion form-builder-imports
import { FormBuilder } from '@angular/forms';
// #enddocregion form-builder-imports
// #docregion validator-imports
import { Validators } from '@angular/forms';
// #enddocregion validator-imports
// #docregion form-array-imports
import { FormArray } from '@angular/forms';
// #enddocregion form-array-imports
@Component({
selector: 'app-profile-editor',
@ -27,13 +22,13 @@ export class ProfileEditorComponent {
state: [''],
zip: ['']
}),
// #enddocregion form-builder, required-validator
// #enddocregion required-validator
aliases: this.fb.array([
this.fb.control('')
])
// #docregion form-builder, required-validator
// #docregion required-validator
});
// #enddocregion form-builder, required-validator, aliases
// #enddocregion required-validator, aliases
// #docregion aliases-getter
get aliases() {
@ -41,11 +36,8 @@ export class ProfileEditorComponent {
}
// #enddocregion aliases-getter
// #docregion inject-form-builder, form-builder
constructor(private fb: FormBuilder) { }
// #enddocregion inject-form-builder
updateProfile() {
this.profileForm.patchValue({
firstName: 'Nancy',
@ -54,7 +46,6 @@ export class ProfileEditorComponent {
}
});
}
// #enddocregion form-builder
// #docregion add-alias
addAlias() {
@ -68,6 +59,4 @@ export class ProfileEditorComponent {
console.warn(this.profileForm.value);
}
// #enddocregion on-submit
// #docregion form-builder
}
// #enddocregion form-builder

1
aio/content/examples/router/src/app/admin/admin-routing.module.3.ts
View File

@ -8,7 +8,6 @@ import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.compo
import { ManageCrisesComponent } from './manage-crises/manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component';
// #docregion admin-route
import { AuthGuard } from '../auth/auth.guard';
// #docregion can-activate-child

2
aio/content/examples/router/src/app/app-routing.module.5.ts
View File

@ -1,9 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
// #docregion import-router
import { RouterModule, Routes } from '@angular/router';
// #enddocregion import-router
import { ComposeMessageComponent } from './compose-message/compose-message.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

2
aio/content/examples/router/src/app/app-routing.module.ts
View File

@ -1,5 +1,5 @@
// #docplaster
// #docregion, preload-v1
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

4
aio/content/examples/router/src/app/app.component.3.ts
View File

@ -11,17 +11,13 @@ import { Router } from '@angular/router';
// #enddocregion h-anchor
*/
/* Incomplete Crisis Center link when CC lacks a default
// #docregion cc-anchor-fail
// The link now fails with a "non-terminal link" error
// #docregion cc-anchor-w-default
<a [routerLink]="['/crisis-center']">Crisis Center</a>
// #enddocregion cc-anchor-w-default
// #enddocregion cc-anchor-fail
*/
/* Crisis Center link when CC lacks a default
// #docregion cc-anchor-no-default
<a [routerLink]="['/crisis-center/']">Crisis Center</a>
// #enddocregion cc-anchor-no-default
*/
/* Crisis Center Detail link
// #docregion Dragon-anchor

2
aio/content/examples/router/src/app/app.module.1.ts
View File

@ -15,7 +15,6 @@ import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
// #docregion first-config
// #docregion appRoutes
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent },
@ -27,7 +26,6 @@ const appRoutes: Routes = [
// #enddocregion wildcard
// #docregion first-config
];
// #enddocregion appRoutes
@NgModule({
imports: [

5
aio/content/examples/router/src/app/app.module.2.ts
View File

@ -1,6 +1,3 @@
// #docplaster
// #docregion
// #docregion hero-import
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@ -26,6 +23,4 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
],
bootstrap: [ AppComponent ]
})
// #enddocregion hero-import
export class AppModule { }
// #enddocregion

13
aio/content/examples/router/src/app/app.module.3.ts
View File

@ -21,9 +21,7 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
BrowserModule,
// #enddocregion module-imports
// #enddocregion remove-heroes
// #docregion animation-import
BrowserAnimationsModule,
// #enddocregion animation-import
// #docregion remove-heroes
// #docregion module-imports
FormsModule,
@ -41,14 +39,3 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
export class AppModule { }
// #enddocregion remove-heroes
// #enddocregion
/*
// #docregion module-imports-2
imports: [
RouterModule.forChild([
// Heroes Routes
]),
AppRoutingModule
],
// #enddocregion module-imports-2
*/

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