5 lines
21 KiB
JSON
5 lines
21 KiB
JSON
|
{
|
||
|
|
"id": "tutorial/toh-pt1",
|
||
|
|
"title": "The hero editor",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt1.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"the-hero-editor\">The hero editor<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt1#the-hero-editor\"><i class=\"material-icons\">link</i></a></h1>\n<p>The application now has a basic title.\nNext you will create a new component to display hero information\nand place that component in the application shell.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample app that this page describes, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"create-the-heroes-component\">Create the heroes component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt1#create-the-heroes-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>Using the Angular CLI, generate a new component named <code>heroes</code>.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng generate component heroes\n</code-example>\n<p>The CLI creates a new folder, <code>src/app/heroes/</code>, and generates\nthe three files of the <code>HeroesComponent</code> along with a test file.</p>\n<p>The <code>HeroesComponent</code> class file is as follows:</p>\n<code-example path=\"toh-pt1/src/app/heroes/heroes.component.ts\" region=\"v1\" header=\"app/heroes/heroes.component.ts (initial version)\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-heroes',\n templateUrl: './heroes.component.html',\n styleUrls: ['./heroes.component.css']\n})\nexport class HeroesComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n\n</code-example>\n<p>You always import the <code><a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> symbol from the Angular core library\nand annotate the component class with <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code>.</p>\n<p><code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> is a decorator function that specifies the Angular metadata for the component.</p>\n<p>The CLI generated three metadata properties:</p>\n<ol>\n<li><code>selector</code>— the component's CSS element selector</li>\n<li><code>templateUrl</code>— the location of the component's template file.</li>\n<li><code>styleUrls</code>— the location of the component's private CSS styles.</li>\n</ol>\n<a id=\"selector\"></a>\n<p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors\">CSS element selector</a>,\n<code>'app-heroes'</code>, matches the name of the HTML element that identifies this component within a parent component's template.</p>\n<p>The <code>ngOnInit()</code> is a <a href=\"guide/lifecycle-hooks#oninit\">lifecycle hook</a>.\nAngular calls <code>ngOnInit()</code> shortly after creating a component.\nIt's a good place to put initialization logic.</p>\n<p>Always <code>export</code> the component class so you can <code>import</code> it elsewhere ... like in the <code>AppModule</code>.</p>\n<h3 id=\"add-a-hero-property\">Add a <code>hero</code> property<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt1#add-a-hero-property\"><i class=\"material-icons\">link</i></a></h3>\n<p>Add a <code>hero</code> property to the <code>HeroesComponent</code> for a hero named \"Windstorm.\"</p>\n<code-example path=\"toh-pt1/src/app/heroes/heroes.component.ts\" region=\"add-hero\" header=\"heroes.component.ts (hero property)\">\nhero = 'Windstorm';\n\n</code-example>\
|
||
|
|
}
|