diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 9c7c58fbe9..05e448c259 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -1,36 +1,54 @@ -// STEP 1 - Install Angular ########################## -.l-main-section - h2#section-install-angular 1. Install Angular +p. + Angular is still unpackaged and in alpha. This quickstart does not + reflect the final build process for Angular. The following setup is for those who + want to try out Angular while it is in alpha. +// STEP 1 - Create a project ########################## +.l-main-section + h2#section-create-project 1. Create a project + p. - Angular is still unpackaged and in alpha. This quickstart does not - reflect the final build process for Angular. The following setup is for those who - want to try out Angular while it is in alpha. + The goal of this quickstart is to create a component that renders "Hello Alice" to the page. + To get started, create a new directory. + + pre.prettyprint + code. + mkdir angular2_quickstart + cd angular2_quickstart + +// STEP 2 - Add the es6-shim ########################## +.l-main-section + h2#section-add-es6-shim 2. Add the es6-shim + + p. Within your project, clone the es6-shim repository: + + pre.prettyprint + code git clone https://github.com/davideast/conscious.git es6-shim p. For the sake of this quickstart we recommend using the es6-shim GitHub repository. - This repository will provide a faster start. es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. - - p Clone the repository inside of already existing project. - - pre.prettyprint.linenums - code git clone https://github.com/davideast/conscious.git es6-shim + This repository will provides a faster start than building from npm. The es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. .l-sub-section - h3 ES6 and es6-shim + h3 ES6, AtScript, and the es6-shim + + h4 AtScript p. - Angular builds on top of ES6 (ECMAScript 6), - the new specification of the JavaScript language. - ES6 is not widely supported in all browsers today. The following es6-shim - repository allows you to use ES6 in the browser. - + Angular is built with AtScript. AtScript is an extension of ES6 (ECMAScript 6), the new specification + of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular. + + h4 ES6 p. - The es6-shim package includes Angular and dependencies needed to compile - ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. - + AtScript compiles to ES6. ES6 is not widely supported in all browsers today. + The es6-shim repository allows you to use ES6 or AtScript in the browser. + + h4 es6-shim p. - Think of the es6-shim repository as package rather than a new project. + The es6-shim package includes Angular and dependencies needed to compile + ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. + Think of the es6-shim repository as package rather than a project. + // STEP 2 - Import Angular ########################## @@ -38,13 +56,15 @@ h2#section-transpile 2. Import Angular p. - This quickstart will consist of two files, an index.html and a + Create two files for this quickstart, 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. + + pre.prettyprint.linenums + code touch index.html + | touch app.es6 - p This quickstart will create a component that renders "Hello Alice" to the page. - - p Using the ES6 module syntax you can import the required modules from Angular2. + p Inside of app.es6, use the ES6 module syntax you can import the required modules from Angular. pre.prettyprint.linenums code import {Component, Template, bootstrap} from 'angular2/angular2'; @@ -55,20 +75,19 @@ // STEP 3 - Create a component ########################## .l-main-section - h2#section-angular-create-account 3. Create a component + h2#section-angular-create-account 3. Define a component p. - 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, - <my-app></my-app>. + Components structure and represent the UI. This quickstart demonstrates the process of creating a component. + The component will have an HTML tag named app, + <my-app></my-app>. - p A component consists 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.prettyprint.linenums code. - // app.es6 - import {Component, Template, bootstrap} from 'angular2/angular2'; - // Annotation Section @Component({ selector: 'my-app' @@ -83,38 +102,33 @@ } } - // Render the app to the page - bootstrap(MyAppComponent); - .l-sub-section h3 Component Annotations p. - A component annotation provides metadata about the component. - An annotation can always identified by its at-sign — @. + A component annotation provides metadata 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 is imported in the first line of app.es6. - The selector property specifies the tag. The selector property is a CSS selector. + The @Component annotation defines the HTML tag for the component. + The selector property is a CSS selector which specifies the HTML tag for the component. p. - 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 + 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.prettyprint.linenums code. @Component({ - selector: 'app' // Defines the <my-app></my-app> tag + selector: 'my-app' // Defines the <my-app></my-app> tag }) @Template({ inline: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component }) p. - The component created above has a HTML tag of <app></app> + The component created above has a HTML tag of <my-app></my-app> and a template of <h1>Hello {{ name }}</h1>. .l-sub-section @@ -147,19 +161,17 @@ .l-main-section h2#section-transpile 4. Bootstrap - p The last step to load the component on the page. - - .l-sub-section - h3 The bootstrap function - 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. - - pre.prettyprint.linenums - code bootstrap(MyAppComponent); - + p The last step to load the component on the page. At the bottom of app.es6 call the bootstrap() function. + + pre.prettyprint.linenums + code bootstrap(MyAppComponent); + + + 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. // STEP 5 - Declare the HTML ########################## @@ -187,53 +199,55 @@ </body> </html> +// STEP 6 - Declare the HTML ########################## +.l-main-section + + h2#section-load-component-module 5. Load the component + + p. + The last step is to load the module for the my-app component. + The es6-shim file comes packaged with the System library. We'll + use System to load the component we created above. + .l-sub-section - h3 Load the component module + h3 System.js + p. - 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. - - 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 my-app component created above: The component to display on the page. + System is a third-party open sourced 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 Tell System about three paths: + ol + li Angular: The Angular framework. + li Runtime assertions: Optional assertions for runtime type checking. + 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> - <script src="/es6-shim/dist/es6-shim.js"></script> - </head> - <body> + <my-app></my-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', // Angular + 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions + 'app': 'app.es6' // The my-app component + }; - <script> - // Rewrite the paths to load the files - System.paths = { - '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 + System.import('app'); + </script> + +// STEP 6 - Declare the HTML ########################## +.l-main-section - // Kick off the application - System.import('app'); - </script> - </body> - </html> + h2#section-load-component-module 5. Run a local server - p Run the root of your project on a local server. // WHAT'S NEXT... ##########################