diff --git a/public/docs/_quickstart.jade b/public/docs/_quickstart.jade index 5875ec5386..cc1978d9fc 100644 --- a/public/docs/_quickstart.jade +++ b/public/docs/_quickstart.jade @@ -30,13 +30,13 @@ header h3#section-transpile Import Angular - p - | Create a new file named app.es6. The .es6 extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2. - pre - code - | import {Component, Template, bootstrap} from 'angular2/angular2'; - p - | The above import statement will import the three basic pieces needed to create an Angular app. The import statement loads the modules dynamically at runtime. + p + | Create a new file named app.es6. The .es6 extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2. + pre + code + | import {Component, Template, bootstrap} from 'angular2/angular2'; + p + | The above import statement will import the three basic pieces needed to create an Angular app. The import statement loads the modules dynamically at runtime. // STEP 3 - Create a component ########################## .content-block.content-number.clearfix @@ -46,74 +46,74 @@ header 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. + 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. + + pre + code <hello></hello> - pre - code <hello></hello> - - p A Component is made up of two parts; the annotation section and the component controller. - - pre - code - | import {Component, Template, bootstrap} from 'angular2/angular2'; - | @Component({ - | selector: 'app' - | }) - | @Template({ - | inline: ` - | <h1>Hello {{ name }}</h1> - | ` - | }) - | class AppComponent { - | constructor() { - | this.name = "Alice"; - | } - | } - | bootstrap(App); + p A Component is made up of two parts; the annotation section and the component controller. - section.docs-sub-section - h4 Component Annotations - .c6 - p - | The annotation section is where you can describe meta-data about your - code component - | You can always identify an annotation by its - code @ - | sign. The Component annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the selector property. The selector property is just a CSS selector. - p - | The Template annotations tells Angular what template to apply to your 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 template. - pre - code - | @Component({ - | selector: 'app' - | }) - | @Template({ - | inline: ` - | <h1>Hello {{ name }}</h1> - | ` - | }) - p - | The Component created above will have 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 defined using the ES6 class syntax. This class is the backing of the component's template. - pre - code - | class AppComponent { - | constructor() { - | this.name = "Alice"; - | } - | } - p - | Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template. - p - | 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 + pre + code + | import {Component, Template, bootstrap} from 'angular2/angular2'; + | @Component({ + | selector: 'app' + | }) + | @Template({ + | inline: ` + | <h1>Hello {{ name }}</h1> + | ` + | }) + | class AppComponent { + | constructor() { + | this.name = "Alice"; + | } + | } + | bootstrap(App); + + section.docs-sub-section + h4 Component Annotations + .c6 + p + | The annotation section is where you can describe meta-data about your + code component + | You can always identify an annotation by its + code @ + | sign. The Component annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the selector property. The selector property is just a CSS selector. + p + | The Template annotations tells Angular what template to apply to your 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 template. + pre + code + | @Component({ + | selector: 'app' + | }) + | @Template({ + | inline: ` + | <h1>Hello {{ name }}</h1> + | ` + | }) + p + | The Component created above will have 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 defined using the ES6 class syntax. This class is the backing of the component's template. + pre + code + | class AppComponent { + | constructor() { + | this.name = "Alice"; + | } + | } + p + | Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template. + p + | 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 @@ -123,76 +123,79 @@ header h3#section-transpile Bootstrap - p - | The last step to get the component to load on the page. - - section.docs-sub-section - h4 The bootstrap function - .c6 - p - | Angular provides a bootstrap function that renders your component to the page. The bootstrap function takes a component as a parameter. Any child components inside of the parent component will be rendered as well. - - code - pre bootstrap(App); - .clear - + p + | The last step to get the component to load on the page. + + section.docs-sub-section + h4 The bootstrap function + .c6 + p + | Angular provides a bootstrap function that renders your component to the page. The bootstrap function takes a component as a parameter. Any child components inside of the parent component will be rendered as well. + + code + 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 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, 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 - | <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 + .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 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. System will allow you to load modules in browsers that do not support ES6 module loading. + + p + | To load the needed modules, System needs to know where to dynamically load the files. The paths property in System allows you to specify where the location of the files. + + p + | Using System.paths specify paths for Angular, runtime assertions, and the app component created above. + + code + 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 @@ -201,5 +204,5 @@ header h3#section-transpile Extra-credit - p - | Learn some template syntax for extra-credit. + p + | Learn some template syntax for extra-credit.