Angular

Setup a local development environment

Setting up a new project on your machine is quick and easy with the QuickStart seed, maintained on github.

Make sure you have the Dart SDK installed. Then ...

Create a project folder (you can call it quickstart and rename it later).
Clone or download the QuickStart seed into your project folder.
Get pub packages.
Run pub serve to launch the sample application.

Clone

Perform the clone-to-launch steps with these terminal commands.

git clone https://github.com/angular-examples/quickstart.git quickstart
cd quickstart
pub get
pub serve

Download

Download the QuickStart seed and unzip it into your project folder. Then perform the remaining steps with these terminal commands.

cd quickstart
pub get
pub serve

What's in the QuickStart seed?

The QuickStart project / downloadable example (view source) can conveniently be used to seed new projects. It contains the following core files:

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

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

name: angular_quickstart
description: QuickStart
version: 0.0.1
environment:
  sdk: '>=1.19.0 <2.0.0'
dependencies:
  angular2: ^2.0.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_quickstart

lib

app_component.dart

pubspec.yaml

web

index.html

main.dart

styles.css

All guides and cookbooks have at least these core files. Each file has a distinct purpose and evolves independently as the application grows.

File	Purpose
`app_component.dart`	Defines the same `AppComponent` as the one in the QuickStart repository. It is the root component of what will become a tree of nested components as the application evolves.
`main.dart`	Compiles the application with the JiT compiler and bootstraps the application to run in the browser. That's a reasonable choice for the development of most projects and it's the only viable choice for a sample running in a live-coding environment like Plunker. You'll learn about alternative compiling and deployment options later in the documentation.

Next Step

If you're new to Angular, we recommend staying on the learning path.

Appendix: the Dart SDK

Install the Dart SDK, if not already on your machine, and any tools you like to use with Dart. The Dart SDK includes tools such as pub, the Dart package manager. If you don't have a favorite Dart editor already, try WebStorm, which comes with a Dart plugin. You can also download Dart plugins for other IDEs and editors.