diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 2e8df428a4..e946e3a462 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -1,8 +1,8 @@ .callout.is-helpful - header Angular is still unpackaged and in alpha + header Angular is in alpha p. This quickstart does not - reflect the final build process for Angular. The following setup is for those who + reflect the final development 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 ########################## @@ -10,46 +10,41 @@ h2#section-create-project 1. Create a project p. - The goal of this quickstart is to create a component that renders "Hello Alice" to the page. - To get started, create a new directory. + This quickstart shows how to write your Angular components in TypeScript. You could instead choose + another language such as Dart, ES5, or ES6. + + p. + The goal of this quickstart is to write a component in TypeScript that prints a string. + To get started, clone the TypeScript quickstart repository: pre.prettyprint - code. - mkdir angular2_quickstart - cd angular2_quickstart - -// STEP 2 - Add the es6-shim ########################## -.l-main-section - h2#section-add-es6-shim 2. Clone the quickstart repository - - p Within your project, clone the quickstart repository: - - pre.prettyprint - code git clone https://github.com/angular/quickstart.git + $ git clone https://github.com/angular/ts-quickstart.git + $ cd ts-quickstart p. For the sake of this quickstart we recommend using the - quickstart GitHub repository. - This repository provides a faster start than building from npm. This repository includes Angular and dependencies to compile ES6 in incompatible browsers. + quickstart GitHub repository. + This repository provides a faster start than building from npm. + This repository includes the Angular distribution and type definitions for TypeScript. - .l-sub-section - h3 ES6, AtScript, and the es6-shim +// STEP 2 - Start the TypeScript compiler ########################## +.l-main-section + h2#start-tsc 2. Run the TypeScript compiler - h4 AtScript - p. - Angular is built with AtScript. AtScript is an extension of ES6 (ECMAScript 6), the new specification - of the JavaScript language. This quickstart features AtScript, but you can write Angular in ES5 or ES6 as well. + p. + Since the browser doesn't understand TypeScript code, we need to run a compiler to translate + your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript + compiler in --watch mode, but it is also possible to do the translation in the browser as files + are loaded, or configure your editor or IDE to do it. + p. + The repository includes a file tsconfig.json. + Many tools — including the TypeScript compiler — + know to read this file so we don't need to configure them or add command-line options. - h4 ES6 - p. - AtScript compiles to ES6, which is not widely supported in all browsers today. - The es6-shim.js file allows you to use ES6 or AtScript in the browser. - - h4 es6-shim - p. - The quickstart repository includes es6-shim.js. - The es6-shim.js file includes dependencies (such as Traceur) needed to compile - ES6 in the browser. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. + pre.prettyprint + # We need to use an unreleased version of TypeScript + $ npm install -g mhegazy/typescript#v1.5-beta + $ tsc --watch // STEP 3 - Import Angular ########################## .l-main-section @@ -57,25 +52,23 @@ p. Create two files, index.html and - app.es6, both at the root of the project: + app.ts, both at the root of the project: pre.prettyprint - code. - touch index.html - touch app.es6 + $ touch index.html + $ touch app.ts - .alert.is-helpful. - The .es6 extension signifies that the file uses ES6 syntax. If your editor doesn't - support syntax highlighting for .es6, use .js. + p Inside of app.ts, import the type definitions from Angular: + pre.prettyprint + code /// <reference path="typings/angular2/angular2.d.ts" /> - p Inside of app.es6, import the required modules from Angular: - - pre.prettyprint.linenums - code import {Component, Template, bootstrap} from 'angular2/angular2'; + p Now your editor should be able to complete the available imports: + pre.prettyprint + code import {Component, View, bootstrap} from 'angular2/angular2'; p. - The above import statement uses ES6 module syntax to import three modules from Angular. - These modules load at runtime. + The above import statement uses ES6 module syntax to import three symbols from the Angular module. + The module will load at runtime. // STEP 4 - Create a component ########################## @@ -88,8 +81,9 @@ that has an HTML tag named <my-app>. p. - A component consists of two parts, the annotation section - and the component controller. + A component consists of two parts, the component controller + which is an ES6 class, and the decorators which tell Angular + how to place the component into the page. pre.prettyprint.linenums code. @@ -102,6 +96,8 @@ }) // Component controller class MyAppComponent { + name: string; + constructor() { this.name = 'Alice'; } @@ -134,12 +130,13 @@ h3 The template and the component controller p. - The component controller is the backing of the component's template. A component - controller uses ES6 class syntax. + The component controller is the backing of the component's template. This component + controller uses TypeScript class syntax. pre.prettyprint.linenums code. class MyAppComponent { + name: string; constructor() { this.name = 'Alice'; } @@ -163,7 +160,7 @@ h2#section-transpile 5. Bootstrap p. - At the bottom of app.es6, call the bootstrap() function + At the bottom of app.ts, call the bootstrap() function to load your new component into its page: pre.prettyprint.linenums @@ -182,9 +179,9 @@ h2#section-angular-create-account 6. Declare the HTML p. - Inside the head tag of index.html, include the es6-shim.js file. - (The es6-shim code must load before any application code.) - Then instantiate the my-app component in the body. + Inside the head tag of index.html, + include the traceur-runtime and the Angular bundle. + Instantiate the my-app component in the body. pre.prettyprint.linenums code. @@ -192,11 +189,12 @@ <html> <head> <title>Angular 2 Quickstart</title> - <script src="/quickstart/dist/es6-shim.js"></script> + <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> + <script src="bundle/angular2.dev.js"></script> </head> <body> - <!-- The app component created in app.es6 --> + <!-- The app component created in app.ts --> <my-app></my-app> </body> @@ -209,7 +207,7 @@ p. The last step is to load the module for the my-app component. - To do this, we'll use the System library, which is included in the quickstart repository. + To do this, we'll use the System library. .l-sub-section h3 System.js @@ -219,31 +217,21 @@ adds ES6 module loading functionality to browsers. p. - Add the following module-loading code to index.html: + Add the System.js dependency in the <head> tag: pre.prettyprint.linenums code. - <my-app></my-app> - - <script> - // Rewrite the paths to load the files - System.paths = { - 'angular2/*':'/quickstart/angular2/*.js', // Angular - 'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions - 'app': 'app.es6' // The my-app component - }; - - // Kick off the application - System.import('app'); - </script> + <head> + <script src="https://jspm.io/system@0.16.js"></script> + </head> p. - The System.paths property above specifies - the paths to the following modules: - ul - li The Angular framework - li Optional assertions for runtime type checking - li The component to display on the page + Add the following module-loading code before the <my-app> tag: + + pre.prettyprint.linenums + code. + <script>System.import('app');</script> + <my-app></my-app> // STEP 8 - Run a local server ##########################