docs(toh5): add moduleId information (#2597)

This commit is contained in:
Jesús Rodríguez 2016-10-14 01:41:57 +02:00 committed by Ward Bell
parent 94b8793d70
commit e503efe8c8
4 changed files with 14 additions and 11 deletions

View File

@ -7,17 +7,18 @@ import { Router } from '@angular/router';
import { Hero } from './hero'; import { Hero } from './hero';
import { HeroService } from './hero.service'; import { HeroService } from './hero.service';
// #docregion metadata
@Component({ @Component({
moduleId: module.id, moduleId: module.id,
selector: 'my-dashboard', selector: 'my-dashboard',
// #docregion templateUrl
templateUrl: 'dashboard.component.html', templateUrl: 'dashboard.component.html',
// #enddocregion templateUrl // #enddocregion metadata
// #docregion css // #docregion css
styleUrls: [ 'dashboard.component.css' ] styleUrls: [ 'dashboard.component.css' ]
// #enddocregion css // #enddocregion css
// #docregion metadata
}) })
// #enddocregion metadata
// #docregion component // #docregion component
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {

View File

@ -6,16 +6,16 @@ import { Location } from '@angular/common';
import { Hero } from './hero'; import { Hero } from './hero';
import { HeroService } from './hero.service'; import { HeroService } from './hero.service';
// #docregion metadata
@Component({ @Component({
moduleId: module.id, moduleId: module.id,
selector: 'my-hero-detail', selector: 'my-hero-detail',
// #docregion templateUrl
templateUrl: 'hero-detail.component.html', templateUrl: 'hero-detail.component.html',
// #enddocregion templateUrl, v2 // #enddocregion metadata, v2
styleUrls: [ 'hero-detail.component.css' ] styleUrls: [ 'hero-detail.component.css' ]
// #docregion v2 // #docregion metadata, v2
}) })
// #enddocregion metadata
// #docregion implement // #docregion implement
export class HeroDetailComponent implements OnInit { export class HeroDetailComponent implements OnInit {
// #enddocregion implement // #enddocregion implement

View File

@ -8,7 +8,9 @@ import { HeroService } from './hero.service';
// #docregion renaming, metadata // #docregion renaming, metadata
@Component({ @Component({
// #enddocregion renaming
moduleId: module.id, moduleId: module.id,
// #docregion renaming
selector: 'my-heroes', selector: 'my-heroes',
// #enddocregion renaming // #enddocregion renaming
templateUrl: 'heroes.component.html', templateUrl: 'heroes.component.html',

View File

@ -367,7 +367,7 @@ block redirect-vs-use-as-default
Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`. Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
+makeExcerpt('app/dashboard.component.ts', 'templateUrl') +makeExcerpt('app/dashboard.component.ts', 'metadata')
:marked :marked
Create that file with this content: Create that file with this content:
@ -585,9 +585,9 @@ block extract-id
+makeExample('app/hero-detail.component.html') +makeExample('app/hero-detail.component.html')
:marked :marked
We update the component metadata with a `templateUrl` pointing to the template file that we just created. We update the component metadata with a `moduleId` and a `templateUrl` pointing to the template file that we just created.
+makeExcerpt('app/hero-detail.component.ts', 'templateUrl') +makeExcerpt('app/hero-detail.component.ts', 'metadata')
:marked :marked
Refresh the browser and see the results. Refresh the browser and see the results.
@ -759,7 +759,7 @@ figure.image-display
1. *Cut-and-paste* the template contents into a new <span ngio-ex>heroes.component.html</span> file. 1. *Cut-and-paste* the template contents into a new <span ngio-ex>heroes.component.html</span> file.
1. *Cut-and-paste* the styles contents into a new <span ngio-ex>heroes.component.css</span> file. 1. *Cut-and-paste* the styles contents into a new <span ngio-ex>heroes.component.css</span> file.
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files. 1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
1. *Set* the `moduleId` property to `module.id` so that 'templateUrl` and `styleUrls` are relative to the component. 1. *Set* the `moduleId` property to `module.id` so that `templateUrl` and `styleUrls` are relative to the component.
.l-sub-section .l-sub-section
:marked :marked