diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade
index 70db2dba5b..84d606a7c7 100644
--- a/public/docs/dart/latest/quickstart.jade
+++ b/public/docs/dart/latest/quickstart.jade
@@ -5,13 +5,22 @@ p.
download Dart.
Then return here.
-// STEP 1 - Install Angular ##########################
+// STEP 1 - Create a project ##########################
.l-main-section
- h2#section-install-angular 1. Install Angular
+ h2#section-install-angular 1. Create a project
p.
- In a new directory, create a pubspec.yaml file.
- Add angular2 and browser as dependencies:
+ Create a new directory, and put a file named
+ pubspec.yaml file in it.
+
+ pre.prettyprint
+ code.
+ > mkdir hello_world
+ > cd hello_world
+ > vim pubspec.yaml # Use your favorite editor!
+
+ p.
+ In pubspec.yaml, add the angular2 and browser packages as dependencies:
// [PENDING: if the transformer isn't working in time,
// remove it and use reflection in Dartium instead.
@@ -51,6 +60,13 @@ p.
p.
Still in the same directory, create a web directory.
Create a file under web named main.dart.
+
+ pre.prettyprint
+ code.
+ > mkdir web
+ > vim web/main.dart # Use your favorite editor!
+
+ p.
Edit web/main.dart to import the angular2 library
and (for now) two reflection libraries:
@@ -69,18 +85,18 @@ p.
p.
A component is a custom HTML element.
- In this step, you create a component that has the tag <app>.
+ In this step, you create a component that has the tag <my-app>.
The Dart code for a component consists of a class
with annotations that describe the component.
p.
Update web/main.dart to add the following code,
- which defines the app component:
+ which defines the my-app component:
pre.prettyprint.linenums
code.
@Component(
- selector: 'app'
+ selector: 'my-app'
)
@Template(
inline: '<h1>Hello {{ name }}</h1>'
@@ -109,15 +125,15 @@ p.
pre.prettyprint.linenums
code.
@Component(
- selector: 'app'
+ selector: 'my-app'
)
@Template(
inline: '<h1>Hello {{ name }}</h1>'
)
p.
- The annotations above specify an HTML tag of <app></app>
- and a template of <h1>Hello {{ name }}</h1>.
+ The annotations above specify an HTML tag of <my-app></my-app>
+ and a template of <h1>Hello {{ name }}</h1>.
// TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing.
@@ -130,7 +146,7 @@ p.
The template above binds to a name property through
the double-mustache syntax ({{ }}).
The body of the constructor assigns "Alice" to the name property. When the
- template renders, Alice appears instead of {{ name }}.
+ template renders, Alice appears instead of {{ name }}.
// [PENDING: Do we really want to use the term "component controller"?
@@ -178,7 +194,7 @@ p.
p.
Create a file named web/index.html that contains
the following code,
- which loads main.dart and instantiates the app component:
+ which loads main.dart and instantiates the my-app component:
pre.prettyprint.linenums
code.
@@ -188,7 +204,7 @@ p.
<title>Angular 2 Quickstart</title>
</head>
<body>
- <app></app>
+ <my-app></my-app>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
@@ -222,7 +238,7 @@ p.
// WHAT'S NEXT... ##########################
.l-main-section
- h2#section-transpile Great Job! Next Step...
+ h2#section-transpile Great job! Next step...
p.
Learn some template syntax for extra credit.
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index cb68c916ba..9c7c58fbe9 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -12,15 +12,16 @@
es6-shim GitHub repository.
This repository will provide a faster start. es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers.
- p Clone the repository inside of aleady existing project.
+ p Clone the repository inside of already existing project.
pre.prettyprint.linenums
- code git clone https://github.com/davideast/concious.git es6-shim
+ code git clone https://github.com/davideast/conscious.git es6-shim
.l-sub-section
- h3 The es6-shim
+ h3 ES6 and es6-shim
p.
- Angular builds on top of ES6, the new specification of the JavaScript language.
+ Angular builds on top of ES6 (ECMAScript 6),
+ the new specification of the JavaScript language.
ES6 is not widely supported in all browsers today. The following es6-shim
repository allows you to use ES6 in the browser.
@@ -32,7 +33,6 @@
Think of the es6-shim repository as package rather than a new project.
-
// STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
@@ -52,7 +52,6 @@
p The above import statement will import three modules from Angular. These modules load at runtime.
-
// STEP 3 - Create a component ##########################
.l-main-section
@@ -75,12 +74,12 @@
selector: 'my-app'
})
@Template({
- inline: `<h1>Hello {{ name }}</h1>`
+ inline: '<h1>Hello {{ name }}</h1>'
})
// Component Controller
class MyAppComponent {
constructor() {
- this.name = "Alice";
+ this.name = 'Alice';
}
}
@@ -111,7 +110,7 @@
selector: 'app' // Defines the <my-app></my-app> tag
})
@Template({
- inline: `<h1>Hello {{ name }}</h1>` // Defines the inline template for the component
+ inline: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
})
p.
@@ -129,7 +128,7 @@
code.
class MyAppComponent {
constructor() {
- this.name = "Alice";
+ this.name = 'Alice';
}
}
@@ -203,9 +202,9 @@
p Tell System about three paths:
ol
- li Angular - The Angular framework.
- li Runtime assertions - Optional assertions for runtime type checking.
- li The my-app component created above - The component to display on the page.
+ li Angular: The Angular framework.
+ li Runtime assertions: Optional assertions for runtime type checking.
+ li The my-app component created above: The component to display on the page.
pre.prettyprint.linenums
code.
@@ -237,9 +236,8 @@
p Run the root of your project on a local server.
-
// WHAT'S NEXT... ##########################
.l-main-section
- h2#section-transpile Great Job! Next Step...
+ h2#section-transpile Great job! Next step...
- p Learn some template syntax for extra-credit.
+ p Learn some template syntax for extra credit.