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