5 lines
10 KiB
JSON
5 lines
10 KiB
JSON
|
{
|
|||
|
|
"id": "tutorial/toh-pt0",
|
|||
|
|
"title": "Create a new project",
|
|||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt0.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=\"create-a-new-project\">Create a new project<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#create-a-new-project\"><i class=\"material-icons\">link</i></a></h1>\n<p>You begin by creating an initial application using the Angular CLI. Throughout this tutorial, you’ll modify and extend that starter application to create the Tour of Heroes app.</p>\n<p>In this part of the tutorial, you'll do the following:</p>\n<ol>\n<li>Set up your environment.</li>\n<li>Create a new workspace and initial app project.</li>\n<li>Serve the application.</li>\n<li>Make changes to the application.</li>\n</ol>\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=\"set-up-your-environment\">Set up your environment<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#set-up-your-environment\"><i class=\"material-icons\">link</i></a></h2>\n<p>To set up your development environment, follow the instructions in <a href=\"guide/setup-local\" title=\"Setting up for Local Development\">Local Environment Setup</a>.</p>\n<h2 id=\"create-a-new-workspace-and-an-initial-application\">Create a new workspace and an initial application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#create-a-new-workspace-and-an-initial-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>You develop apps in the context of an Angular <a href=\"guide/glossary#workspace\">workspace</a>. A workspace contains the files for one or more <a href=\"guide/glossary#project\">projects</a>. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace.</p>\n<p>To create a new workspace and an initial app project:</p>\n<ol>\n<li>\n<p>Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder.</p>\n</li>\n<li>\n<p>Run the CLI command <code>ng new</code> and provide the name <code>angular-tour-of-heroes</code>, as shown here:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng new angular-tour-of-heroes\n</code-example>\n</li>\n<li>\n<p>The <code>ng new</code> command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.</p>\n</li>\n</ol>\n<p>The Angular CLI installs the necessary Angular <code>npm</code> packages and other dependencies. This can take a few minutes.</p>\n<p>It also creates the following workspace and starter project files:</p>\n<ul>\n<li>A new workspace, with a root folder named <code>angular-tour-of-heroes</code>.</li>\n<li>An initial skeleton app project, also called <code>angular-tour-of-heroes</code> (in the <code>src</code> subfolder).</li>\n<li>An end-to-end test project (in the e2e subfolder).</li>\n<li>Related configuration files.</li>\n</ul>\n<p>The initial app project contains a simple Welcome app, ready to run.</p>\n<h2 id=\"serve-the-application\">Serve the application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#serve-the-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>Go to the workspace directory and launch the application.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n cd angular-tour-of-heroes\n ng serve --open\n</code-example>\n<div class=\"alert is-helpful\">\n<p>The <code>ng serve</code> command builds the app, starts the development server,\nwatches the source files, and
|
|||
|
|
}
|