diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index 6deedf14fe..e2bfe52d1f 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -39,14 +39,15 @@
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.
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.
@@ -58,20 +59,19 @@
p.
Components are custom HTML elements. Angular uses components to empower HTML.
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.
-
- pre.prettyprint.linenums
- code <app></app>
+ 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: `
@@ -79,11 +79,14 @@
`
})
// 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 +95,13 @@
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 @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 +109,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
@@ -125,11 +128,11 @@
pre.prettyprint.linenums
code
- class AppComponent {
- constructor() {
- this.name = "Alice";
- }
- }
+ | class MyAppComponent {
+ | constructor() {
+ | this.name = "Alice";
+ | }
+ | }
p.
Templates read from their component controllers. Templates have access to any properties
@@ -157,7 +160,7 @@
component will render as well.
pre.prettyprint.linenums
- code bootstrap(AppComponent);
+ code bootstrap(MyAppComponent);
@@ -174,6 +177,7 @@
pre.prettyprint.linenums
code.
+ <!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
@@ -182,7 +186,7 @@
<body>
<!-- The app component created in app.es6 -->
- <app></app>
+ <my-app></my-app>
</body>
</html>
@@ -190,7 +194,7 @@
.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 +208,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 +220,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