diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 6deedf14fe..e2bfe52d1f 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -39,14 +39,15 @@ h2#section-transpile 2. Import Angular p. - Create a file named app.es6 at the root of the project. + This quickstart will consist of two files, an index.html and a + app.es6. Both of these files will be at the root of the project. The .es6 extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2. pre.prettyprint.linenums code import {Component, Template, bootstrap} from 'angular2/angular2'; - p The above import statement will import the three modules from Angular. These modules load at runtime. + p The above import statement will import three modules from Angular. These modules load at runtime. @@ -58,20 +59,19 @@ p. Components are custom HTML elements. Angular uses components to empower HTML. Components structure and repre.prettyprint.linenumssent the UI. This quickstart - demonstrates the process of creating a component. This component will have the tag of app. - - pre.prettyprint.linenums - code <app></app> + demonstrates the process of creating a component. This component will have the tag of app, + <my-app></my-app>. p A component consists of two parts; the annotation section and the component controller. pre.prettyprint.linenums code. + // app.es6 import {Component, Template, bootstrap} from 'angular2/angular2'; // Annotation Section @Component({ - selector: 'app' + selector: 'my-app' }) @Template({ inline: ` @@ -79,11 +79,14 @@ ` }) // Component Controller - class AppComponent { + class MyAppComponent { constructor() { this.name = "Alice"; } } + + // Render the app to the page + bootstrap(MyAppComponent); .l-sub-section h3 Component Annotations @@ -92,11 +95,13 @@ 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 @Component annotation defines the HTML tag for the component. The @Component + annotation is imported in the first line of app.es6. The selector property specifies the tag. The selector property is a CSS selector. p. - The @Template annotation defines the template to apply to the + The @Template annotation defines the template to apply to the The @Template + annotation is imported in the first line of app.es6. 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. @@ -104,17 +109,15 @@ pre.prettyprint.linenums code. @Component({ - selector: 'app' + selector: 'app' // Defines the <my-app></my-app> tag }) @Template({ - inline: ` - <h1>Hello {{ name }}</h1> - ` + inline: `<h1>Hello {{ name }}</h1>` // Defines the inline template for the component }) p. The component created above has a HTML tag of <app></app> - and a template of <h1>Hello {{ name }}</h1>. + and a template of <h1>Hello {{ name }}</h1>. .l-sub-section h3 Component Controller @@ -125,11 +128,11 @@ pre.prettyprint.linenums code - class AppComponent { - constructor() { - this.name = "Alice"; - } - } + | class MyAppComponent { + | constructor() { + | this.name = "Alice"; + | } + | } p. Templates read from their component controllers. Templates have access to any properties @@ -157,7 +160,7 @@ component will render as well. pre.prettyprint.linenums - code bootstrap(AppComponent); + code bootstrap(MyAppComponent); @@ -174,6 +177,7 @@ pre.prettyprint.linenums code. + <!-- index.html --> <html> <head> <title>Angular 2 Quickstart</title> @@ -182,7 +186,7 @@ <body> <!-- The app component created in app.es6 --> - <app></app> + <my-app></my-app> </body> </html> @@ -190,7 +194,7 @@ .l-sub-section h3 Load the component module p. - The last step is to load the module for the app component. + The last step is to load the module for the my-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. @@ -204,10 +208,11 @@ 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. + li The my-app component created above - The component to display on the page. pre.prettyprint.linenums code. + <!-- index.html --> <html> <head> <title>Angular 2 Quickstart</title> @@ -215,15 +220,15 @@ </head> <body> - <!-- The app component created in app.es6 --> - <app></app> + <!-- The my-app component created in app.es6 --> + <my-app></my-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' + 'angular2/*':'/es6-shim/angular2/*.js', // Angular + 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions + 'app': 'app.es6' // The my-app component }; // Kick off the application