diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade
index 70d3aa4a81..448645a201 100644
--- a/public/docs/dart/latest/guide/setup.jade
+++ b/public/docs/dart/latest/guide/setup.jade
@@ -1,69 +1,59 @@
.l-main-section
- h2#section-install Install Angular
- p There are four steps to create any Angular app:
- ol
- li Create an entry point HTML file where users will start
- li Load the Angular library at the top of the file
- li Make a root component for your application
- li Bootstrap Angular
p.
- Dart makes dependencies available to the application through the pubspec.yaml file.
- To use Angular2 in your app, include angular as a dependency. Here’s the minimal
- pubspec.yaml file for this sample:
+ As long as you already
+ have the Dart SDK,
+ getting started with Angular 2 is simple:
- pre.prettyprint.lang-dart
+ ol
+ li Depend on the angular2 pub package.
+ li Create a Dart file that defines (directly or indirectly) a
+ root component and bootstraps Angular.
+ li Create an HTML file that uses the root component and points to the Dart file
+
+ p.
+ You can use whichever editor or IDE you like,
+ or just use the command-line tools that the Dart SDK provides.
+ See Dart Tools
+ for more information.
+
+
+ h2#section-install Depend on angular2
+
+ p.
+ To use Angular2 in your app, include angular2 as a dependency in
+ your app's pubspec.yaml file. For example:
+
+ pre.prettyprint.lang-yaml
code.
+ # pubspec.yaml
name: getting_started
description: Dart version of Angular 2 example, Getting Started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.20
browser: any
-
p.
- The Dart Editor automatically downloads the packages your app depends on, along with any packages that they, in
- turn, depend on. If this download fails or you like using the command line, you can explicitly install packages.
- From Dart Editor, you can use Tools > Pub Get. From the command line (in the root directory of
- your app, assuming the Dart SDK is in your path), you can run pub get.
-
-.l-main-section
- h2#section-create-an-entry-point Create an entry point
- p.
- In the web/ directory for your app, create an index.html file and add the Angular library
- tags and a main.dart file where you'll build your first component.
-
- p.
- In the <body>, add an element called <my-app> that will be the root of your
- application.
-
- pre.prettyprint.lang-html
- code.
- //index.html
- <!DOCTYPE html>
- <html>
- <head>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <my-app></my-app>
- <script type="application/dart" src="main.dart"></script>
- <script src="packages/browser/dart.js"></script>
- </body>
- </html>
+ Run pub get to download the packages your app depends on.
+ (Dart-savvy editors and IDEs
+ typically run pub get for you.)
.l-main-section
- h2#section-set-up-the-starting-component Set up the starting component
+ h2#section-set-up-the-starting-component Write the Dart code
p.
- In main.dart, create a class called AppComponent, configure it to bind to the
- <my-app> element in index.html, and call Angular's bootstrap() to kick
- it all off like this:
+ Next to your pubspec.yaml file,
+ create a web subdirectory containing a Dart file
+ (main.dart).
+ Edit main.dart, adding a component class (AppComponent),
+ configuring it to bind to the <my-app> element,
+ and creating a top-level main() function that calls
+ Angular's bootstrap() function.
pre.prettyprint.lang-dart
code.
- //main.dart
+ // web/main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
@@ -83,13 +73,59 @@
}
.l-main-section
- h2#section-run-it Run it!
+ h2#section-create-an-entry-point Create an HTML file
+ p.
+ In the web/ directoryapp, create an HTML file (index.html).
+ Edit index.html to add a <my-app> element
+ and call main.dart.
+
+ pre.prettyprint.lang-html
+ code.
+ <!-- web/index.html -->
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+ <my-app></my-app>
+ <script type="application/dart" src="main.dart"></script>
+ <script src="packages/browser/dart.js"></script>
+ </body>
+ </html>
+
+.l-main-section
+ h2#section-run-it Run the app!
p.
- Now run the app. In Dart Editor’s Files view, select index.html, right-click, and choose Run
- in Dartium.
+ Now run the app. How you do this depends on your tools.
+
+ ul
+ li.
+ If you're using Dart Editor,
+ right-click web/index.html,
+ and choose Open in Dartium.
+ This starts a web server
+ and opens your app in Dartium,
+ an experimental version of the Chromium browser that contains the Dart VM.
+
+ li.
+ If you're using WebStorm or IntelliJ IDEA,
+ right-click web/index.html,
+ and choose Run 'index.html'.
+
+ li.
+ If you're using the command line and don't have Dartium,
+ serve the app using pub serve,
+ and then run it by visiting http://localhost:8080 in a browser.
+ Generating the JavaScript takes a few seconds when you first visit the page,
+ and the generated JavaScript is currently large.
+ The generated JavaScript will be smaller once
+ Angular's transformer becomes available.
+
+ p.
+ You should see something like this:
- You should see:
div(align='center')
img(src='setup-example1.png')
@@ -98,21 +134,48 @@
p This basic Angular app contains the structure for any app you'll build.
- p.
- You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top
- level container for the rest of your application. You've named this one AppComponent, but there's
- nothing special about the name and you can use whatever makes sense to you.
+ .l-sub-section
+ h3 It's all a tree
+
+ p.
+ You can think of an Angular app as a tree of components.
+ The root component acts as the top-level container for the rest of your application.
+ You've named this one AppComponent, but there's
+ nothing special about the name; you can use whatever makes sense to you.
+
+ p.
+ The root component's job is to give a location in the HTML file where
+ your application can
+ render through its element—in this case, <my-app>.
+ There's nothing special about the HTML filename or the element name;
+ you can pick whatever you like.
+
+ p.
+ The root component loads the initial template for the application,
+ which loads other components to perform
+ whatever functions your application needs—menu bars, views, forms, and so on.
+ We'll walk through examples of all of
+ these in the following pages.
+
+ .l-sub-section
+ h3 @Component and @View annotations
+
+ p.
+ A component annotation describes details about the component.
+ An annotation can be identified by its at-sign (@).
+ p.
+ The @Component annotation defines the HTML tag for
+ the component by specifying the component's CSS selector.
+ p.
+ The @View annotation defines the HTML that
+ represents the component.
+ The component you wrote uses an inline template,
+ but you can also have an external template.
+ To use an external template,
+ specify a templateUrl property and
+ give it the path to the HTML file.
+
p.
- The root component's job is to give a location in the index.html file where your application will
- render through it's element, in this case <my-app>. There is also nothing special about this
- element name and you can pick it as you like.
-
- p.
- The root component loads the initial template for the application that will load other components to perform
- whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of
- these in the following pages.
-
- p Exciting! Not excited yet? Let's move on to Displaying Data.
-
-
+ Exciting! Not excited yet?
+ Let's move on to Displaying Data.