The Starter App

2.2

Send feedback

This tutorial starts with a bare-bones Angular app. Run the live example to see the app.

Create the app

Let's get started.

Use WebStorm or the command line and the Simple Angular Example template to create a project named angular_tour_of_heroes. For detailed instructions, see Setup for Development.

Keep the app compiling and running, using either WebStorm or pub serve. Every time you change the app, reload the browser window to see the latest version.

Angular app basics

Angular applications 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:

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

Every component begins with an @Component annotation function that takes a metadata object. The metadata object 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.

web/index.html (inside <body>)

<my-app>Loading AppComponent content here ...</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:

import 'package:angular2/core.dart'; @Component( selector: 'my-app', template: '<h1>Hello {{name}}</h1>') class AppComponent { var name = 'Angular'; } import 'package:angular2/platform/browser.dart'; import 'package:angular_quickstart/app_component.dart'; void main() { bootstrap(AppComponent); } <!DOCTYPE html> <html> <head> <title>Hello Angular</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script defer src="main.dart" type="application/dart"></script> <script defer src="packages/browser/dart.js"></script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> </body> </html> /* Master Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } name: angular_quickstart description: QuickStart version: 0.0.1 environment: sdk: '>=1.19.0 <2.0.0' dependencies: angular2: ^2.2.0 dev_dependencies: browser: ^0.10.0 dart_to_js_script_rewriter: ^1.0.1 transformers: - angular2: platform_directives: - 'package:angular2/common.dart#COMMON_DIRECTIVES' platform_pipes: - 'package:angular2/common.dart#COMMON_PIPES' entry_points: web/main.dart - dart_to_js_script_rewriter

These files are organized as follows:

angular_tour_of_heroes
lib
app_component.dart
web
main.dart
index.html
styles.css
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 application grows.

File Purpose
lib/app_component.dart

Defines <my-app>, the root component of what will become a tree of nested components as the application evolves.

web/main.dart

Bootstraps the application to run 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.

pubspec.yaml

The file that describes this Dart package (the app) and its dependencies. For example, it specifies the angular2 and browser packages as dependencies, as well as the angular2 transformer.

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.