The Starter App

3.1

Send feedback

This tutorial starts with a bare-bones Angular app. Run the 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 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:

lib/app_component.dart

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

web/index.html (inside <body>)

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

import 'package:angular2/angular2.dart'; @Component( selector: 'my-app', template: '<h1>Hello {{name}}</h1>', ) class AppComponent { var name = 'Angular'; } @Tags(const ['aot']) @TestOn('browser') import 'package:angular2/angular2.dart'; import 'package:angular_test/angular_test.dart'; import 'package:test/test.dart'; import 'package:angular_tour_of_heroes/app_component.dart'; @AngularEntrypoint() void main() { final testBed = new NgTestBed<AppComponent>(); NgTestFixture<AppComponent> fixture; setUp(() async { fixture = await testBed.create(); }); tearDown(disposeAnyRunningTest); test('Default greeting', () { expect(fixture.text, 'Hello Angular'); }); test('Greet world', () async { await fixture.update((c) => c.name = 'World'); expect(fixture.text, 'Hello World'); }); test('Greet world HTML', () { final html = fixture.rootElement.innerHtml; expect(html, '<h1>Hello Angular</h1>'); }); } import 'package:angular2/platform/browser.dart'; import 'package:angular_tour_of_heroes/app_component.dart'; void main() { bootstrap(AppComponent); } <!DOCTYPE html> <html> <head> <script> // WARNING: DO NOT set the <base href> like this in production! // Details: https://webdev.dartlang.org/angular/guide/router (function () { var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/); document.write('<base href="' + (m ? m[0] : '/') + '" />'); }()); </script> <title>Angular Tour of Heroes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <link rel="icon" type="image/png" href="favicon.png"> <script defer src="main.dart" type="application/dart"></script> <script defer src="packages/browser/dart.js"></script> </head> <body> <my-app>Loading...</my-app> </body> </html> @import url(https://fonts.googleapis.com/css?family=Roboto); @import url(https://fonts.googleapis.com/css?family=Material+Icons); /* 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_tour_of_heroes description: Tour of Heroes version: 0.0.1 environment: sdk: '>=1.24.0 <2.0.0' dependencies: angular2: ^3.1.0 dev_dependencies: angular_test: ^1.0.0-beta+2 browser: ^0.10.0 dart_to_js_script_rewriter: ^1.0.1 test: ^0.12.21 transformers: - angular2: entry_points: web/main.dart - angular2/transform/reflection_remover: $include: test/**_test.dart - test/pub_serve: $include: test/**_test.dart - dart_to_js_script_rewriter web: compiler: debug: dartdevc

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

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

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.

Note: The dart_to_js_script_rewriter transformer, if present, must be after angular2 in the transformers list. If the order is wrong, Angular templates don’t work.

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.