5 lines
21 KiB
JSON
5 lines
21 KiB
JSON
|
{
|
||
|
|
"id": "guide/architecture-components",
|
||
|
|
"title": "Introduction to components and templates",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/architecture-components.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=\"introduction-to-components-and-templates\">Introduction to components and templates<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-components#introduction-to-components-and-templates\"><i class=\"material-icons\">link</i></a></h1>\n<p>A <em>component</em> controls a patch of screen called a <a href=\"guide/glossary#view\" title=\"Definition of view\"><em>view</em></a>.\nFor example, individual components define and control each of the following views from the <a href=\"tutorial\">Tour of Heroes tutorial</a>:</p>\n<ul>\n<li>The app root with the navigation links.</li>\n<li>The list of heroes.</li>\n<li>The hero editor.</li>\n</ul>\n<p>You define a component's application logic—what it does to support the view—inside a class.\nThe class interacts with the view through an API of properties and methods.</p>\n<p>For example, <code>HeroListComponent</code> has a <code>heroes</code> property that holds an array of heroes.\nIts <code>selectHero()</code> method sets a <code>selectedHero</code> property when the user clicks to choose a hero from that list.\nThe component acquires the heroes from a service, which is a TypeScript <a href=\"https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties\">parameter property</a> on the constructor.\nThe service is provided to the component through the dependency injection system.</p>\n<code-example path=\"architecture/src/app/hero-list.component.ts\" header=\"src/app/hero-list.component.ts (class)\" region=\"class\">\nexport class HeroListComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n heroes: Hero[];\n selectedHero: Hero;\n\n constructor(private service: HeroService) { }\n\n ngOnInit() {\n this.heroes = this.service.getHeroes();\n }\n\n selectHero(hero: Hero) { this.selectedHero = hero; }\n}\n\n\n</code-example>\n<p>Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional <a href=\"guide/lifecycle-hooks\">lifecycle hooks</a>, like <code>ngOnInit()</code>.</p>\n<h2 id=\"component-metadata\">Component metadata<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-components#component-metadata\"><i class=\"material-icons\">link</i></a></h2>\n<img src=\"generated/images/guide/architecture/metadata.png\" alt=\"Metadata\" class=\"left\" width=\"170\" height=\"48\">\n<p>The <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that <code>HeroListComponent</code> is just a class, with no special Angular notation or syntax at all. It's not a component until you mark it as one with the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator.</p>\n<p>The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a <em>template</em> with the component, either directly with inline code, or by reference. Together, the component and its template describe a <em>view</em>.</p>\n<p>In addition to containing or pointing to the template, the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> metadata configures, for example, how the component can be referenced in HTML and what services it requires.</p>\n<p>Here's an example of basic metadata for <code>HeroListComponent</code>.</p>\n<code-example path=\"architect
|
||
|
|
}
|