Permalink
Fetching contributors…
Cannot retrieve contributors at this time
153 lines (129 sloc) 4.99 KB
layout title description prevpage nextpage
angular
The Starter App
A bare-bones Angular app
title url
Tutorial: Tour of Heroes
/angular/tutorial
title url
The Hero Editor
/angular/tutorial/toh-pt1

This tutorial starts with a bare-bones Angular app. Run the {% example_ref %} 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 {%- if site.branch != 'master' %} ({{site.branch}} branch) {%- endif %}. 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:

  import 'package:angular/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.

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

<style>td, th {vertical-align: top}</style>
File Purpose
lib/app_component.dart Defines ``, 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](../guide/testing) page.
web/main.dart Launches the app in the browser.
web/index.html Contains the `` tag in its ``. 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.