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 rebuilds the app as you make changes to those files.</p>\n<p>The <code>--open</code> flag opens a browser to <code>http://localhost:4200/</code>.</p>\n</div>\n<p>You should see the app running in your browser.</p>\n<h2 id=\"angular-components\">Angular components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#angular-components\"><i class=\"material-icons\">link</i></a></h2>\n<p>The page you see is the <em>application shell</em>.\nThe shell is controlled by an Angular <strong>component</strong> named <code>AppComponent</code>.</p>\n<p><em>Components</em> are the fundamental building blocks of Angular applications.\nThey display data on the screen, listen for user input, and take action based on that input.</p>\n<h2 id=\"make-changes-to-the-application\">Make changes to the application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#make-changes-to-the-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>Open the project in your favorite editor or IDE and navigate to the <code>src/app</code> folder to make some changes to the starter app.</p>\n<p>You'll find the implementation of the shell <code>AppComponent</code> distributed over three files:</p>\n<ol>\n<li><code>app.component.ts</code>— the component class code, written in TypeScript.</li>\n<li><code>app.component.html</code>— the component template, written in HTML.</li>\n<li><code>app.component.css</code>— the component's private CSS styles.</li>\n</ol>\n<h3 id=\"change-the-application-title\">Change the application title<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#change-the-application-title\"><i class=\"material-icons\">link</i></a></h3>\n<p>Open the component class file (<code>app.component.ts</code>) and change the value of the <code>title</code> property to 'Tour of Heroes'.</p>\n<code-example path=\"toh-pt0/src/app/app.component.ts\" region=\"set-title\" header=\"app.component.ts (class title property)\">\ntitle = 'Tour of Heroes';\n\n</code-example>\n<p>Open the component template file (<code>app.component.html</code>) and\ndelete the default template generated by the Angular CLI.\nReplace it with the following line of HTML.</p>\n<code-example path=\"toh-pt0/src/app/app.component.html\" header=\"app.component.html (template)\">\n<h1>{{title}}</h1>\n\n\n</code-example>\n<p>The double curly braces are Angular's <em>interpolation binding</em> syntax.\nThis interpolation binding presents the component's <code>title</code> property value\ninside the HTML header tag.</p>\n<p>The browser refreshes and displays the new application title.</p>\n<a id=\"app-wide-styles\"></a>\n<h3 id=\"add-application-styles\">Add application styles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#add-application-styles\"><i class=\"material-icons\">link</i></a></h3>\n<p>Most apps strive for a consistent look across the application.\nThe CLI generated an empty <code>styles.css</code> for this purpose.\nPut your application-wide styles there.</p>\n<p>Open <code>src/styles.css</code> and add the code below to the file.</p>\n<code-example path=\"toh-pt0/src/styles.1.css\" header=\"src/styles.css (excerpt)\">\n/* Application-wide Styles */\nh1 {\n color: #369;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 250%;\n}\nh2, h3 {\n color: #444;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: lighter;\n}\nbody {\n margin: 2em;\n}\nbody, input[type=\"text\"], button {\n color: #333;\n font-family: Cambria, Georgia, serif;\n}\n/* everywhere else */\n* {\n font-family: Arial, Helvetica, sans-serif;\n}\n\n\n</code-example>\n<h2 id=\"final-code-review\">Final code review<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#final-code-review\"><i class=\"material-icons\">link</i></a></h2>\n<p>Here are the code files discussed on this page.</p>\n<code-tabs>\n\n <code-pane header=\"src/app/app.component.ts\" path=\"toh-pt0/src/app/app.component.ts\">\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: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n title = 'Tour of Heroes';\n}\n\n\n</code-pane>\n\n <code-pane header=\"src/app/app.component.html\" path=\"toh-pt0/src/app/app.component.html\">\n<h1>{{title}}</h1>\n\n\n</code-pane>\n\n <code-pane header=\"src/styles.css (excerpt)\" path=\"toh-pt0/src/styles.1.css\">\n/* Application-wide Styles */\nh1 {\n color: #369;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 250%;\n}\nh2, h3 {\n color: #444;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: lighter;\n}\nbody {\n margin: 2em;\n}\nbody, input[type=\"text\"], button {\n color: #333;\n font-family: Cambria, Georgia, serif;\n}\n/* everywhere else */\n* {\n font-family: Arial, Helvetica, sans-serif;\n}\n\n\n</code-pane>\n</code-tabs>\n<h2 id=\"summary\">Summary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt0#summary\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>You created the initial application structure using the Angular CLI.</li>\n<li>You learned that Angular components display data.</li>\n<li>You used the double curly braces of interpolation to display the app title.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/example-apps-list\n - tutorial/toh-pt2\n-->\n<!-- links from this doc:\n - api/core/Component\n - guide/glossary#project\n - guide/glossary#workspace\n - guide/setup-local\n - tutorial/toh-pt0#add-application-styles\n - tutorial/toh-pt0#angular-components\n - tutorial/toh-pt0#change-the-application-title\n - tutorial/toh-pt0#create-a-new-project\n - tutorial/toh-pt0#create-a-new-workspace-and-an-initial-application\n - tutorial/toh-pt0#final-code-review\n - tutorial/toh-pt0#make-changes-to-the-application\n - tutorial/toh-pt0#serve-the-application\n - tutorial/toh-pt0#set-up-your-environment\n - tutorial/toh-pt0#summary\n - https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt0.md?message=docs%3A%20describe%20your%20change...\n-->"
|
||
} |