5 lines
19 KiB
JSON
5 lines
19 KiB
JSON
|
{
|
||
|
|
"id": "guide/what-is-angular",
|
||
|
|
"title": "What is Angular?",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/what-is-angular.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=\"what-is-angular\">What is Angular?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/what-is-angular#what-is-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p>This topic can help you understand Angular: what Angular is, what advantages it provides, and what you might expect as you start to build your applications.</p>\n<p>Angular is a development platform, built on <a href=\"https://www.typescriptlang.org/\">TypeScript</a>. As a platform, Angular includes:</p>\n<ul>\n<li>A component-based framework for building scalable web applications</li>\n<li>A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more</li>\n<li>A suite of developer tools to help you develop, build, test, and update your code</li>\n</ul>\n<p>With Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as easy as possible, so you can take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example name=\"what-is-angular\"></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<a id=\"essentials\"></a>\n<h2 id=\"angular-applications-the-essentials\">Angular applications: The essentials<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/what-is-angular#angular-applications-the-essentials\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section explains the core ideas behind Angular. Understanding these ideas can help you design and build your applications more effectively.</p>\n<a id=\"components\"></a>\n<h3 id=\"components\">Components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/what-is-angular#components\"><i class=\"material-icons\">link</i></a></h3>\n<p>Components are the building blocks that compose an application. A component includes a TypeScript class with a <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code> decorator, an HTML template, and styles. The <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code> decorator specifies the following Angular-specific information:</p>\n<ul>\n<li>A CSS selector that defines how the component is used in a template. HTML elements in your template that match this selector become instances of the component.</li>\n<li>An HTML template that instructs Angular how to render the component.</li>\n<li>An optional set of CSS styles that define the appearance of the template's HTML elements.</li>\n</ul>\n<p>The following is a minimal Angular component.</p>\n<code-example path=\"what-is-angular/src/app/hello-world/hello-world.component.ts\">\n\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'hello-world',\n template: `\n <h2>Hello World</h2>\n <p>This is my first component!</p>\n `,\n})\nexport class HelloWorldComponent {\n // The code in this class drives the component's behavior.\n}\n\n\n</code-example>\n<p>To use this component, you write the following in a template:</p>\n<code-example path=\"what-is-angular/src/app/app.component.html\" region=\"hello-world-selector\">\n<hello-world></hello-world>\n\n</code-example>\n<p>When Angular renders
|
||
|
|
}
|