diff --git a/public/docs/js/_quickstart.jade b/public/docs/js/_quickstart.jade index 332fef8760..262786403b 100644 --- a/public/docs/js/_quickstart.jade +++ b/public/docs/js/_quickstart.jade @@ -83,43 +83,42 @@ section.docs-sub-section h4 Component Annotations - .c6 - p - | 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 selector property specifies the tag. The selector property is a CSS selector. - p - | The @Template annotation defines the template to apply to the 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({ - | selector: 'app' - | }) - | @Template({ - | inline: ` - | <h1>Hello {{ name }}</h1> - | ` - | }) - p - | The component created above has a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>. + + p + | 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 selector property specifies the tag. The selector property is a CSS selector. + p + | The @Template annotation defines the template to apply to the 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({ + | selector: 'app' + | }) + | @Template({ + | inline: ` + | <h1>Hello {{ name }}</h1> + | ` + | }) + p + | The component created above has a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>. .clear section.docs-sub-section h4 Component Controller - .c6 - p - | The component controller is the backing of the component's template. A component controller uses ES6 class syntax. - pre - code - | class AppComponent { - | constructor() { - | this.name = "Alice"; - | } - | } - p - | Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller. - p - | The template above binds to a name property through the {{ }} syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of {{ name }}. + p + | The component controller is the backing of the component's template. A component controller uses ES6 class syntax. + pre + code + | class AppComponent { + | constructor() { + | this.name = "Alice"; + | } + | } + p + | Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller. + p + | The template above binds to a name property through the {{ }} syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of {{ name }}. .clear // STEP 4 - Bootstrap ########################## @@ -135,13 +134,12 @@ section.docs-sub-section h4 The bootstrap function - .c6 - p - | Angular provides a bootstrap function that renders a component to the page. The bootstrap function takes a component as a parameter. Any child components inside of the parent component will render as well. + p + | Angular provides a bootstrap function that renders a component to the page. The bootstrap function takes a component as a parameter. Any child components inside of the parent component will render as well. - code - pre bootstrap(AppComponent); - .clear + code + pre bootstrap(AppComponent); + .clear // STEP 5 - Declare the HTML ########################## .content-block.content-number.clearfix @@ -170,48 +168,47 @@ section.docs-sub-section h4 Load the component module - .c6 - p - | The last step is to load the module for the 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. + p + | The last step is to load the module for the 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. - p - | To load the needed modules, System needs to know where to load the files from. The paths property in System specifies the location of the files. + p + | To load the needed modules, System needs to know where to load the files from. The paths property in System specifies the location of the files. - p Tell System about three paths: - 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. - - code - pre - | <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> - | - | <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' - | }; - | - | // Kick off the application - | System.import('app'); - | </script> - | </body> - | </html> - .clear + p Tell System about three paths: + 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. - p - | Run the root of your project on a local server. + code + pre + | <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> + | + | <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' + | }; + | + | // Kick off the application + | System.import('app'); + | </script> + | </body> + | </html> + .clear + + p + | Run the root of your project on a local server. .content-block.content-number.clearfix i.number.icon-number6.large