# The Application Shell
## Install the Angular CLI
Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so.
npm install -g @angular/cli
## Create a new application
Create a new project named `angular-tour-of-heroes` with this CLI command.
ng new angular-tour-of-heroes
The Angular CLI generated a new project with a default application and supporting files.
You can add pre-packaged functionality to a new project by using the `ng add` command. The `ng add` command transforms a project by applying the schematics in the specified package.
For more information, see the [Angular CLI documentation.](https://github.com/angular/angular-cli/wiki/add "Angular CLI documentation")
Angular Material provides schematics for typical app layouts.
See the [Angular Material documentation](https://material.angular.io/guides "Angular Material documentation") for details.
## Serve the application
Go to the project directory and launch the application.
cd angular-tour-of-heroes
ng serve --open
The `ng serve` command builds the app, starts the development server,
watches the source files, and rebuilds the app as you make changes to those files.
The `--open` flag opens a browser to `http://localhost:4200/`.
You should see the app running in your browser.
## Angular components
The page you see is the _application shell_.
The shell is controlled by an Angular **component** named `AppComponent`.
_Components_ are the fundamental building blocks of Angular applications.
They display data on the screen, listen for user input, and take action based on that input.
## Change the application title
Open the project in your favorite editor or IDE and navigate to the `src/app` folder.
You'll find the implementation of the shell `AppComponent` distributed over three files:
1. `app.component.ts`— the component class code, written in TypeScript.
1. `app.component.html`— the component template, written in HTML.
1. `app.component.css`— the component's private CSS styles.
Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'.
Open the component template file (`app.component.html`) and
delete the default template generated by the Angular CLI.
Replace it with the following line of HTML.
The double curly braces are Angular's *interpolation binding* syntax.
This interpolation binding presents the component's `title` property value
inside the HTML header tag.
The browser refreshes and displays the new application title.
{@a app-wide-styles}
## Add application styles
Most apps strive for a consistent look across the application.
The CLI generated an empty `styles.css` for this purpose.
Put your application-wide styles there.
Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app.
## Final code review
The source code for this tutorial and the complete _Tour of Heroes_ global styles
are available in the .
Here are the code files discussed on this page.
## Summary
* You created the initial application structure using the Angular CLI.
* You learned that Angular components display data.
* You used the double curly braces of interpolation to display the app title.