Search

#### Docs

- Guide
  - Overview
  - Setup
  - Learning Angular
  - Architecture
  - Displaying Data
  - User Input
  - Forms
  - Dependency Injection
  - Template Syntax
- Tutorial
  - Introduction
  - 0. The Starter App
  - 1. The Hero Editor
  - 2. Master/Detail
  - 3. Multiple Components
  - 4. Services
  - 5. Routing
  - 6. HTTP
- Advanced
  - Attribute Directives
  - Component Styles
  - Deployment
  - Hierarchical Injectors
  - HTTP Client
  - Lifecycle Hooks
  - Pipes
  - Router
  - Security
  - Structural Directives
  - Testing

#### Components

- Components Gallery

#### Resources

- Cheat Sheet
- Glossary
- FAQ
- Tools
- Community and Support

#### Reference

- Videos
- API Documentation

new_releases We're currently in the progress of migrating this site from Angular version 5.3.1 to 7.0.0. Package versions might be out-of-date or inconsistent! Visit the repo for more info.

# The Starter App 6.0

<?code-excerpt path-base=”examples/ng/doc/toh-0”?> This tutorial starts with a bare-bones Angular app. Run the live example (view source) to see the app.

## Create the app

Let’s get started. Create a project named `angular_tour_of_heroes`, using WebStorm or the command line and the angular-examples/quickstart GitHub project. For detailed instructions, see Create a starter project from the Setup for Development page.

## Run the app, and keep it running

Run the app from your IDE or the command line, as explained in the Run the app section of the Setup for Development page.

You’ll be making changes to the app throughout this tutorial. When you are ready to view your changes, reload the browser window. This will reload the app. As you save updates to the code, the `pub` tool detects changes and serves the new app.

## Angular app basics

Angular apps are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen. The starter app has a component that displays a simple string:

<?code-excerpt “lib/app_component.dart” title linenums?>

      import 'package:ngdart/angular.dart';

      @Component(
        selector: 'my-app',
        template: '<h1>Hello {{name}}</h1>',
      )
      class AppComponent {
        var name = 'Angular';
      }

Every component begins with an `@Component` annotation that describes how the HTML template and component class work together.

The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.

<?code-excerpt “web/index.html (inside <body>)” region=”my-app” title?>

      <my-app>Loading...</my-app>

The `template` property defines a message inside an `<h1>` header. The message starts with “Hello” and ends with `{{name}}`, which is an Angular interpolation binding expression. At runtime, Angular replaces `{{name}}` with the value of the component’s `name` property. Interpolation binding is one of many Angular features you’ll discover in this documentation.

## The starter app’s code

The app contains the following core files:

These files are organized as follows:

- angular_tour_of_heroes
  - lib
    - app_component.dart
  - test
    - app_test.dart
  - web
    - index.html
    - main.dart
    - styles.css
  - analysis_options.yaml
  - pubspec.yaml

All the examples in this documentation have at least these core files. Each file has a distinct purpose and evolves independently as the app grows.

File | Purpose
--- | ---
`lib/app_component.dart` | Defines `<my-app>`, the root component of what will become a tree of nested components as the app evolves.
`test/app_test.dart` | Defines `AppComponent` tests. While testing isn’t covered in this tutorial, you can learn how to test the Tour of Heroes app from the Testing page.
`web/main.dart` | Launches the app in the browser.
`web/index.html` | Contains the `<my-app>` tag in its `<body>`. This is where the app lives!
`web/styles.css` | A set of styles used throughout the app.
`analysis_options.yaml` | The analysis options file. For details, see Customize Static Analysis.
`pubspec.yaml` | The file that describes this Dart package (the app) and its dependencies. For details, see Pubspec Format.

## What’s next

In the next tutorial page, you’ll modify the starter app to display more interesting data, and to allow the user to edit that data.