docs(toh5): add better explanations for templateUrl

closes #929
This commit is contained in:
Foxandxss 2016-03-08 13:45:29 +01:00 committed by Ward Bell
parent 7c23ebc823
commit af1eaae873
2 changed files with 9 additions and 1 deletions

View File

@ -10,7 +10,9 @@ import { HeroService } from './hero.service';
@Component({
selector: 'my-dashboard',
// #docregion template-url
templateUrl: 'app/dashboard.component.html',
// #enddocregion template-url
// #docregion css
styleUrls: ['app/dashboard.component.css']
// #enddocregion css

View File

@ -281,8 +281,13 @@ code-example(format="." language="bash").
Lets spice up the dashboard by displaying the top four heroes at a glance.
Replace the `template` metadata with a `templateUrl` property that points to a new
template file, `dashboard.component.html`.
template file.
+makeExample('toh-5/ts/app/dashboard.component.ts', 'template-url', 'app/dashboard.component.ts (templateUrl)')(format=".")
.l-sub-section
:marked
Even if the template sits on the same folder as the component, the path for the template will be root-relative.
:marked
Create that file with these contents:
+makeExample('toh-5/ts/app/dashboard.component.html', null, 'dashboard.component.html')(format=".")
:marked
@ -581,6 +586,7 @@ figure.image-display
:marked
The `styleUrls` property is an array of style file names (with paths).
We could list multiple style files from different locations if we needed them.
Like with `templateUrl`, the paths are root-relative.
:marked
### Stylish Hero Details
The designers also gave us CSS styles specifically for the `HeroDetailComponent`.