5 lines
14 KiB
JSON
5 lines
14 KiB
JSON
|
{
|
||
|
|
"id": "guide/component-overview",
|
||
|
|
"title": "Angular Components Overview",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/component-overview.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=\"angular-components-overview\">Angular Components Overview<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#angular-components-overview\"><i class=\"material-icons\">link</i></a></h1>\n<p>Components are the main building block for Angular applications. Each component consists of:</p>\n<ul>\n<li>An HTML template that declares what renders on the page</li>\n<li>A Typescript class that defines behavior</li>\n<li>A CSS selector that defines how the component is used in a template</li>\n<li>Optionally, CSS styles applied to the template</li>\n</ul>\n<p>This topic describes how to create and configure an Angular component.</p>\n<div class=\"alert is-helpful\">\n<p>To view or download the example code used in this topic, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To create a component, verify that you have met the following prerequisites:</p>\n<ol>\n<li><a href=\"guide/setup-local#install-the-angular-cli\">Install the Angular CLI.</a></li>\n<li><a href=\"guide/setup-local#create-a-workspace-and-initial-application\">Create an Angular workspace</a> with initial application.\nIf you don't have a project, you can create one using <code>ng new <project-name></code>, where <code><project-name></code> is the name of your Angular application.</li>\n</ol>\n<h2 id=\"creating-a-component\">Creating a component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#creating-a-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>The easiest way to create a component is with the Angular CLI. You can also create a component manually.</p>\n<h3 id=\"creating-a-component-using-the-angular-cli\">Creating a component using the Angular CLI<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#creating-a-component-using-the-angular-cli\"><i class=\"material-icons\">link</i></a></h3>\n<p>To create a component using the Angular CLI:</p>\n<ol>\n<li>From a terminal window, navigate to the directory containing your application.</li>\n<li>Run the <code>ng generate component <component-name></code> command, where <code><component-name></code> is the name of your new component.</li>\n</ol>\n<p>By default, this command creates the following:</p>\n<ul>\n<li>A folder named after the component</li>\n<li>A component file, <code><component-name>.component.ts</code></li>\n<li>A template file, <code><component-name>.component.html</code></li>\n<li>A CSS file, <code><component-name>.component.css</code></li>\n<li>A testing specification file, <code><component-name>.component.spec.ts</code></li>\n</ul>\n<p>Where <code><component-name></code> is the name of your component.</p>\n<div class=\"alert is-helpful\">\n<p>You can change how <code>ng generate component</code> creates new components.\nFor more information, see <a href=\"cli/generate#component-command\">ng generate component</a> in the Angular CLI documentation.</p>\n</div>\n<h3 id=\"creating-a-component-manually\">Creating a component manually<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#creating-a-component-manually\"><i class=\"material-icons\">link</i></a></h3>\n<p>Although the Angular CLI is the easiest way to create an Angular component, you can also create a component manually.\nThis section describes how to create the core component fi
|
||
|
|
}
|