diff --git a/public/docs/_quickstart.jade b/public/docs/_quickstart.jade
index d5f7ee1f94..5875ec5386 100644
--- a/public/docs/_quickstart.jade
+++ b/public/docs/_quickstart.jade
@@ -45,10 +45,6 @@
.c11
header
- // Angular is a component based framework.
- // Components are custom HTML elements.
- // Components are used to structure and represent the UI.
-
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
.
@@ -119,6 +115,7 @@
| 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 }}
.
.clear
+// STEP 4 - Bootstrap ##########################
.content-block.content-number.clearfix
i.number.icon-number4.large
@@ -139,15 +136,63 @@
pre bootstrap(App);
.clear
+// STEP 5 - Declare the HTML ##########################
+.content-block.content-number.clearfix
+ i.number.icon-number5.large
+ .c11
+ header
+
+ 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.
+
+ code
+ pre
+ | <html>
+ | <head>
+ | <title>Angular 2 Quickstart</title>
+ | </head>
+ | <body>
+ |
+ | <!-- The app component created in app.es6 -->
+ | <app></app>
+ |
+ | </body>
+ | </html>
+
section.docs-sub-section
- h4 Declare the HTML
+ h4 Load the component module
.c6
p
- | Create a index.html
file.
+ | The last step is to load the module for the app
component. The es6-shim
file comes packaged with the System
library, which is the current polyfill for ES6 module loading. System
will allow you to load modules in browsers that do not support ES6 module loading.
+
+ p
+ |
code
- pre <app></app>
- .clear
+ pre
+ | <html>
+ | <head>
+ | <title>Angular 2 Quickstart</title>
+ | </head>
+ | <body>
+ |
+ | <!-- The app component created in app.es6 -->
+ | <app></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'
+ | };
+ |
+ | System.import('app');
+ | </script>
+ | </body>
+ | </html>
+ .clear
.content-block.content-number.clearfix
i.number.icon-number6.large