Setup for local development

Setup a local development environment

The QuickStart live-coding example is an Angular playground. It's not where you'd develop a real application. You should develop locally on your own machine ... and that's also how we think you should learn Angular.

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

  1. Create a project folder (you can call it quickstart and rename it later).
  2. Clone or download the QuickStart seed into your project folder.
  3. Get pub packages.
  4. 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 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'; } 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> 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 /* 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; }

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.

FilePurpose
app.component.ts

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.

app.module.ts

Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.

main.ts

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.