Quickstart updates.

This commit is contained in:
David East 2015-04-21 16:49:24 -07:00
parent 8752fffe2e
commit bee30ca1ad
1 changed files with 8 additions and 14 deletions

View File

@ -95,8 +95,8 @@ p.
@Component({ @Component({
selector: 'my-app' selector: 'my-app'
}) })
@Template({ @View({
inline: '<h1>Hello {{ name }}</h1>' template: '<h1>Hello {{ name }}</h1>'
}) })
// Component controller // Component controller
class MyAppComponent { class MyAppComponent {
@ -106,28 +106,22 @@ p.
} }
.l-sub-section .l-sub-section
h3 Component annotations h3 @Component and @View annotations
p. p.
A component annotation provides metadata about the component. A component annotation describes details about the component. An annotation can be identified by its at-sign (<code>@</code>).
An annotation can be identified by its at-sign (<code>@</code>).
p. p.
The <code>@Component</code> annotation defines The <code>@Component</code> annotation defines the HTML tag for the component by specifying the component's CSS selector.
the HTML tag for the component by specifying the component's CSS selector.
p. p.
The <code>@Template</code> annotation defines the HTML that The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
represents the component. This component uses an inline template,
but you can also have an external template. To use an external template,
specify a <code>url</code> property
and give it the path to the HTML file.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
@Component({ @Component({
selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
}) })
@Template({ @View({
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
}) })
p. p.