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