This tutorial starts with a bare-bones Angular 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
For detailed instructions, see Setup for Development.
Keep the app compiling and running,
using either WebStorm or
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:
Every component begins with an
takes a metadata object. The metadata object describes how the HTML template and component class work together.
selector property tells Angular to display the component inside a custom
<my-app> tag in the
template property defines a message inside an
The message starts with "Hello" and ends with
which is an Angular interpolation binding expression.
At runtime, Angular replaces
the value of the component's
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:
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.
Bootstraps the application to run in the browser.
A set of styles used throughout the app.
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.
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.