diff --git a/public/docs/_quickstart.jade b/public/docs/_quickstart.jade
index dc43f38262..10db4323dd 100644
--- a/public/docs/_quickstart.jade
+++ b/public/docs/_quickstart.jade
@@ -12,15 +12,20 @@
header
h3#section-install-angular Install Angular
- p
- | To include Angular in your project you'll need to install the framework and its dependencies from npm.
- b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular.
- | The following setup is for those who want to try out Angular while it is in alpha.
-
- p
- | For the sake of this quickstart we recommend using the es6-shim GitHub repository for a faster start. The es6-shim repository includes all of the dependencies needed to write ES6 that compiles in the browser. Think of this repository as package rather than a new project. Clone the repository inside of aleady existing project.
- pre
- code git clone https://github.com/davideast/concious.git es6-shim
+ p
+ b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular.
+ | The following setup is for those who want to try out Angular while it is in alpha.
+ p
+ | For the sake of this quickstart we recommend using the
+ a(href="https://github.com/davideast/conscious") es6-shim GitHub repository.
+ | This repository will provide a faster start.
+
+ p
+ | Angular is available on npm. However, the es6-shim repository comes with the Angular npm package. This package includes the dependencies needed to write ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
+ p
+ | For the sake of this quickstart we recommend using the es6-shim GitHub repository for a faster start. Angular can be installed through npm. The es6-shim repository comes with the Angular npm package and includes all of the dependencies needed to write ES6 that compiles in the browser. Think of the es6-shim repository as package rather than a new project. Clone the repository inside of aleady existing project.
+ pre
+ code git clone https://github.com/davideast/concious.git es6-shim
// STEP 2 - Import Angular ##########################
.content-block.content-number.clearfix
@@ -31,7 +36,9 @@
h3#section-transpile Import Angular
p
- | Create a new file named app.es6. The .es6 extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2.
+ | Create a new file named app.es6 at the root of the project. The .es6 extension signifies that the file uses ES6 syntax.
+
+ p Using the ES6 module syntax you can import the required modules from Angular2.
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
@@ -50,13 +57,15 @@
| 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.
pre
- code <hello></hello>
+ code <app></app>
p A Component is made up of two parts; the annotation section and the component controller.
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
+ |
+ | // Annotation Section
| @Component({
| selector: 'app'
| })
@@ -65,24 +74,24 @@
| <h1>Hello {{ name }}</h1>
| `
| })
+ | // Component Controller
| class AppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
- | bootstrap(AppComponent);
section.docs-sub-section
h4 Component Annotations
.c6
p
- | The annotation section is where you can describe meta-data about your
- code component
- | You can always identify an annotation by its
- code @
- | sign. 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.
+ | A component annotation provides meta-data about the component. An annotation can always identified by its @ sign.
+
p
- | The Template annotations 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 template.
+ | 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.
pre
code
| @Component({
@@ -94,7 +103,7 @@
| `
| })
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 will have a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>.
.clear
section.docs-sub-section
@@ -110,9 +119,9 @@
| }
| }
p
- | Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template.
+ | Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
p
- | In 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. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of {{ name }}.
.clear
// STEP 4 - Bootstrap ##########################