cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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