diff --git a/public/docs/js/2_0_0-alpha_11/quickstart.jade b/public/docs/js/2_0_0-alpha_11/quickstart.jade
index 4095a11d3f..7ebceb95b8 100644
--- a/public/docs/js/2_0_0-alpha_11/quickstart.jade
+++ b/public/docs/js/2_0_0-alpha_11/quickstart.jade
@@ -1,3 +1 @@
h1 JavaScript Quickstart
-
-!= partial("../_quickstart", public.docs.js._data)
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index 253710693c..cb68c916ba 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -18,19 +18,18 @@
code git clone https://github.com/davideast/concious.git es6-shim
.l-sub-section
- h3 A word on ES6
+ h3 The es6-shim
p.
Angular builds on top of ES6, the new specification of the JavaScript language.
- Not all ES6 features are available in all browsers. The following es6-shim
- repository allows you to use ES6 in the browser today.
-
- p.
- Angular is available on npm. Configuring Angular to run ES6 in the browser
- requires a build process, detailed here.
+ ES6 is not widely supported in all browsers today. The following es6-shim
+ repository allows you to use ES6 in the browser.
p.
The es6-shim package includes Angular and dependencies needed to compile
- ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
+ ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
+
+ p.
+ Think of the es6-shim repository as package rather than a new project.
@@ -39,14 +38,18 @@
h2#section-transpile 2. Import Angular
p.
- Create a file named app.es6 at the root of the project.
+ This quickstart will consist of two files, an index.html and a
+ app.es6. Both of these files will be at the root of the project.
The .es6 extension signifies that the file uses ES6 syntax.
- Using the ES6 module syntax you can import the required modules from Angular2.
+
+ p This quickstart will create a component that renders "Hello Alice" to the page.
+
+ p Using the ES6 module syntax you can import the required modules from Angular2.
pre.prettyprint.linenums
code import {Component, Template, bootstrap} from 'angular2/angular2';
- p The above import statement will import the three modules from Angular. These modules load at runtime.
+ p The above import statement will import three modules from Angular. These modules load at runtime.
@@ -56,35 +59,34 @@
h2#section-angular-create-account 3. Create a component
p.
- 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.prettyprint.linenums
- code <app></app>
+ Components structure and repre.prettyprint.linenumssent the UI. This quickstart
+ demonstrates the process of creating a component. This component will have the tag of app,
+ <my-app></my-app>.
p A component consists of two parts; the annotation section and the component controller.
pre.prettyprint.linenums
code.
+ // app.es6
import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation Section
@Component({
- selector: 'app'
+ selector: 'my-app'
})
@Template({
- inline: `
- <h1>Hello {{ name }}</h1>
- `
+ inline: `<h1>Hello {{ name }}</h1>`
})
// Component Controller
- class AppComponent {
+ class MyAppComponent {
constructor() {
this.name = "Alice";
}
}
+ // Render the app to the page
+ bootstrap(MyAppComponent);
+
.l-sub-section
h3 Component Annotations
@@ -92,11 +94,13 @@
A component annotation provides metadata about the component.
An annotation can always identified by its at-sign — @.
p.
- The @Component annotation defines the HTML tag for the component.
+ The @Component annotation defines the HTML tag for the component. The @Component
+ annotation is imported in the first line of app.es6.
The selector property specifies the tag. The selector property is a CSS selector.
p.
- The @Template annotation defines the template to apply to the
+ The @Template annotation defines the template to apply to the The @Template
+ annotation is imported in the first line of app.es6.
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.
@@ -104,17 +108,15 @@
pre.prettyprint.linenums
code.
@Component({
- selector: 'app'
+ selector: 'app' // Defines the <my-app></my-app> tag
})
@Template({
- inline: `
- <h1>Hello {{ name }}</h1>
- `
+ inline: `<h1>Hello {{ name }}</h1>` // Defines the inline template for the component
})
p.
The component created above has a HTML tag of <app></app>
- and a template of <h1>Hello {{ name }}</h1>.
+ and a template of <h1>Hello {{ name }}</h1>.
.l-sub-section
h3 Component Controller
@@ -124,8 +126,8 @@
controller uses ES6 class syntax.
pre.prettyprint.linenums
- code
- class AppComponent {
+ code.
+ class MyAppComponent {
constructor() {
this.name = "Alice";
}
@@ -157,7 +159,7 @@
component will render as well.
pre.prettyprint.linenums
- code bootstrap(AppComponent);
+ code bootstrap(MyAppComponent);
@@ -167,30 +169,29 @@
h2#section-angular-create-account 5. Declare the HTML
p.
- 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.
+ Inside of the index.html, 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.
pre.prettyprint.linenums
code.
+ <!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="/es6-shim/dist/es6-shim.js"></script>
</head>
<body>
-
+
<!-- The app component created in app.es6 -->
- <app></app>
-
+ <my-app></my-app>
+
</body>
</html>
.l-sub-section
h3 Load the component module
p.
- The last step is to load the module for the app component.
+ The last step is to load the module for the my-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.
@@ -204,10 +205,11 @@
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.
+ li The my-app component created above - The component to display on the page.
pre.prettyprint.linenums
code.
+ <!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
@@ -215,15 +217,15 @@
</head>
<body>
- <!-- The app component created in app.es6 -->
- <app></app>
+ <!-- The my-app component created in app.es6 -->
+ <my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
- 'angular2/*':'/es6-shim/angular2/*.js',
- 'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
- 'app': 'app.es6'
+ 'angular2/*':'/es6-shim/angular2/*.js', // Angular
+ 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions
+ 'app': 'app.es6' // The my-app component
};
// Kick off the application