5 lines
26 KiB
JSON
5 lines
26 KiB
JSON
|
{
|
||
|
|
"id": "start",
|
||
|
|
"title": "Getting started with Angular",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/start/index.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=\"getting-started-with-angular\">Getting started with Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#getting-started-with-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p>Welcome to Angular!</p>\n<p>This tutorial introduces you to the essentials of Angular by walking you through building an e-commerce site with a catalog, shopping cart, and check-out form.</p>\n<p>To help you get started right away, this tutorial uses a ready-made application that you can examine and modify interactively on <a href=\"https://stackblitz.com/\">Stackblitz</a>—without having to <a href=\"guide/setup-local\" title=\"Setup guide\">set up a local work environment</a>.\nStackBlitz is a browser-based development environment where you can create, save, and share projects using a variety of technologies.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To get the most out of this tutorial you should already have a basic understanding of the following.</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML\" title=\"Learning HTML: Guides and tutorials\">HTML</a></li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" title=\"JavaScript\">JavaScript</a></li>\n<li><a href=\"https://www.typescriptlang.org/\" title=\"The TypeScript language\">TypeScript</a></li>\n</ul>\n<a id=\"components\"></a>\n<h2 id=\"take-a-tour-of-the-example-application\">Take a tour of the example application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#take-a-tour-of-the-example-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>You build Angular applications with components.\nComponents define areas of responsibility in the UI that let you reuse sets of UI functionality.</p>\n<p>A component consists of three things:</p>\n<ul>\n<li><strong>A component class</strong> that handles data and functionality.</li>\n<li><strong>An HTML template</strong> that determines the UI.</li>\n<li><strong>Component-specific styles</strong> that define the look and feel.</li>\n</ul>\n<p>This guide demonstrates building an application with the following components.</p>\n<ul>\n<li><code><app-root></code>—the first component to load and the container for the other components.</li>\n<li><code><app-top-bar></code>—the store name and checkout button.</li>\n<li><code><app-product-list></code>—the product list.</li>\n<li><code><app-product-alerts></code>—a component that contains the application's alerts.</li>\n</ul>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/app-components.png\" alt=\"Online store with three components\" width=\"324\" height=\"527\">\n</div>\n<p>For more information about components, see <a href=\"guide/architecture-components\" title=\"Introduction to Components and Templates\">Introduction to Components</a>.</p>\n<a id=\"new-project\"></a>\n<h2 id=\"create-the-sample-project\">Create the sample project<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#create-the-sample-project\"><i class=\"material-icons\">link</i></a></h2>\n<p>To create the sample project, generate the <live-example name=\"getting-started-v0\" nodownload=\"\">ready-made sample project in StackBlitz</live-example>.\nTo save your work:</p>\n<ol>\n<li>Log into StackBlitz.</li>\n<li>Fork the project you generated.</li>\n<li>Save periodically.</li>\n</ol>\n<p>In StackBlitz, the preview pane on the right shows the starting state of the example application.\nThe pre
|
||
|
|
}
|