diff --git a/public/docs/_quickstart.jade b/public/docs/_quickstart.jade
index 10db4323dd..f5f076d73e 100644
--- a/public/docs/_quickstart.jade
+++ b/public/docs/_quickstart.jade
@@ -43,7 +43,7 @@
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
p
- | The above import statement will import the three basic pieces needed to create an Angular app. The import statement loads the modules dynamically at runtime.
+ | The above import statement will import the three modules from Angular. These modules load at runtime.
// STEP 3 - Create a component ##########################
.content-block.content-number.clearfix
@@ -54,12 +54,12 @@
h3#section-angular-create-account Create a component
p
- | Angular allows you to create custom HTML elements through components. Components are used to structure and represent the UI. This quickstart demonstrates the process of creating a Component
with the HTML tag of app
.
+ | Components are custom HTML elements. Angular uses components to empower HTML. Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.
pre
code <app></app>
- p A Component
is made up of two parts; the annotation section and the component controller.
+ p A component consists of two parts; the annotation section and the component controller.
pre
code
@@ -85,13 +85,11 @@
h4 Component Annotations
.c6
p
- | A component annotation provides meta-data about the component
. An annotation can always identified by its @
sign.
-
- p
- | The @Component
annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the selector
property. The selector
property is just a CSS selector.
-
- p
- | The @Template
annotation tells Angular what template to apply to your component. This component uses an inline template, but external templates are available as well. To use an external template specify a url
property and give it the path to the html file.
+ | A component annotation provides meta-data about the component
. An annotation can always identified by its at-sign — @
.
+ p
+ | The @Component
annotation defines the HTML tag for the component. The selector property specifies the tag. The selector
property is a CSS selector.
+ p
+ | The @Template
annotation defines the template to apply to the component. This component uses an inline template, but external templates are available as well. To use an external template specify a url
property and give it the path to the html file.
pre
code
| @Component({
@@ -103,14 +101,14 @@
| `
| })
p
- | The component created above will have a HTML tag of <app></app>
and a template of <h1>Hello {{ name }}</h1>
.
+ | The component created above has a HTML tag of <app></app>
and a template of <h1>Hello {{ name }}</h1>
.
.clear
section.docs-sub-section
h4 Component Controller
.c6
p
- | The component controller is defined using the ES6 class
syntax. This class
is the backing of the component's template.
+ | The component controller is the backing of the component's template. A component controller uses ES6 class
syntax.
pre
code
| class AppComponent {
@@ -121,7 +119,7 @@
p
| Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
p
- | The template above binds to a name
property through the {{ }}
syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of {{ name }}
.
+ | The template above binds to a name
property through the {{ }}
syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of {{ name }}
.
.clear
// STEP 4 - Bootstrap ##########################
@@ -133,13 +131,13 @@
h3#section-transpile Bootstrap
p
- | The last step to get the component to load on the page.
+ | The last step to load the component on the page.
section.docs-sub-section
h4 The bootstrap
function
.c6
p
- | Angular provides a bootstrap
function that renders your component to the page. The bootstrap
function takes a component as a parameter. Any child components inside of the parent component will be rendered as well.
+ | Angular provides a bootstrap
function that renders a component to the page. The bootstrap
function takes a component as a parameter. Any child components inside of the parent component will render as well.
code
pre bootstrap(AppComponent);
@@ -153,7 +151,7 @@
h3#section-angular-create-account Declare the HTML
p
- | Create a index.html
file at the root of the project. Include the es6-shim.js
file in the head
tag. Once the shim is included the app
component can be declared in the HTML.
+ | Create an index.html
file at the root of the project. Include the es6-shim.js
file in the head
tag. Now, declare the app component the body
. The es6-shim must load before any application code.
code
pre
@@ -173,14 +171,17 @@
section.docs-sub-section
h4 Load the component module
.c6
- p
- | The last step is to load the module for the app
component. The es6-shim
file comes packaged with the System
library. System
will allow you to load modules in browsers that do not support ES6 module loading.
-
p
- | To load the needed modules, System
needs to know where to dynamically load the files. The paths
property in System
allows you to specify where the location of the files.
-
+ | The last step is to load the module for the app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers.
+
p
- | Using System.paths
specify paths for Angular, runtime assertions, and the app
component created above.
+ | To load the needed modules, System needs to know where to load the files from. The paths property in System specifies the location of the files.
+
+ p Tell System about three paths:
+ ol
+ li Angular - The Angular framework.
+ li Runtime assertions - Optional assertions for runtime type checking.
+ li The app component created above - The component to display on the page.
code
pre