{ "id": "tutorial/toh-pt0", "title": "Create a new project", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Create a new projectlink

\n

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.

\n

In this part of the tutorial, you'll do the following:

\n
    \n
  1. Set up your environment.
    2. \n
  2. Create a new workspace and initial app project.
    3. \n
  3. Serve the application.
    4. \n
  4. Make changes to the application.
    5. \n
\n
\n

For the sample app that this page describes, see the .

\n
\n

Set up your environmentlink

\n

To set up your development environment, follow the instructions in Local Environment Setup.

\n

Create a new workspace and an initial applicationlink

\n

You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. 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.

\n

To create a new workspace and an initial app project:

\n
    \n
  1. \n

    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.

    \n
    2. \n
  2. \n

    Run the CLI command ng new and provide the name angular-tour-of-heroes, as shown here:

    \n\n ng new angular-tour-of-heroes\n\n
    3. \n
  3. \n

    The ng new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

    \n
    4. \n
\n

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

\n

It also creates the following workspace and starter project files:

\n\n

The initial app project contains a simple Welcome app, ready to run.

\n

Serve the applicationlink

\n

Go to the workspace directory and launch the application.

\n\n cd angular-tour-of-heroes\n ng serve --open\n\n
\n

The ng serve command builds the app, starts the development server,\nwatches the source files, and rebuilds the app as you make changes to those files.

\n

The --open flag opens a browser to http://localhost:4200/.

\n
\n

You should see the app running in your browser.

\n

Angular componentslink

\n

The page you see is the application shell.\nThe shell is controlled by an Angular component named AppComponent.

\n

Components 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.

\n

Make changes to the applicationlink

\n

Open the project in your favorite editor or IDE and navigate to the src/app folder to make some changes to the starter app.

\n

You'll find the implementation of the shell AppComponent distributed over three files:

\n
    \n
  1. app.component.ts— the component class code, written in TypeScript.
    2. \n
  2. app.component.html— the component template, written in HTML.
    3. \n
  3. app.component.css— the component's private CSS styles.
    4. \n
\n

Change the application titlelink

\n

Open the component class file (app.component.ts) and change the value of the title property to 'Tour of Heroes'.

\n\ntitle = 'Tour of Heroes';\n\n\n

Open the component template file (app.component.html) and\ndelete the default template generated by the Angular CLI.\nReplace it with the following line of HTML.

\n\n<h1>{{title}}</h1>\n\n\n\n

The double curly braces are Angular's interpolation binding syntax.\nThis interpolation binding presents the component's title property value\ninside the HTML header tag.

\n

The browser refreshes and displays the new application title.

\n\n

Add application styleslink

\n

Most apps strive for a consistent look across the application.\nThe CLI generated an empty styles.css for this purpose.\nPut your application-wide styles there.

\n

Open src/styles.css and add the code below to the file.

\n\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\n

Final code reviewlink

\n

Here are the code files discussed on this page.

\n\n\n \nimport { Component } from '@angular/core';\n\n@Component({\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\n\n \n<h1>{{title}}</h1>\n\n\n\n\n \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\n\n

Summarylink

\n\n\n \n
\n\n\n" }