diff --git a/public/docs/_quickstart.jade b/public/docs/_quickstart.jade index 10db4323dd..f5f076d73e 100644 --- a/public/docs/_quickstart.jade +++ b/public/docs/_quickstart.jade @@ -43,7 +43,7 @@ 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. + | The above import statement will import the three modules from Angular. These modules load at runtime. // STEP 3 - Create a component ########################## .content-block.content-number.clearfix @@ -54,12 +54,12 @@ 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. + | Components are custom HTML elements. Angular uses components to empower HTML. Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app. pre code <app></app> - p A Component is made up of two parts; the annotation section and the component controller. + p A component consists of two parts; the annotation section and the component controller. pre code @@ -85,13 +85,11 @@ h4 Component Annotations .c6 p - | A component annotation provides meta-data about the component. An annotation can always identified by its @ sign. - - p - | 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 annotation 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 html file. + | 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({ @@ -103,14 +101,14 @@ | ` | }) p - | The component created above will have a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>. + | 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 defined using the ES6 class syntax. This class is the backing of the component's template. + | The component controller is the backing of the component's template. A component controller uses ES6 class syntax. pre code | class AppComponent { @@ -121,7 +119,7 @@ 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. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of {{ name }}. + | 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 ########################## @@ -133,13 +131,13 @@ h3#section-transpile Bootstrap p - | The last step to get the component to load on the page. + | The last step to load the component 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. + | 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); @@ -153,7 +151,7 @@ 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. + | Create an index.html file at the root of the project. Include the es6-shim.js file in the head tag. Now, declare the app component the body. The es6-shim must load before any application code. code pre @@ -173,14 +171,17 @@ 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. - + | 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 - | Using System.paths specify paths for Angular, runtime assertions, and the app component created above. + | 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