honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update quickstart to use TypeScript

This commit is contained in:
Alex Eagle 2015-04-23 15:16:45 -07:00
parent bc12ba61b7
commit a3b66cbcd5
1 changed files with 66 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
public/docs/js/latest/quickstart.jade
View File

@ -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
<a href="https://github.com/angular/quickstart"> <code>quickstart</code> GitHub repository</a>.
This repository provides a faster start than building from <code>npm</code>. This repository includes Angular and dependencies to compile ES6 in incompatible browsers.
<a href="https://github.com/angular/ts-quickstart"> <code>quickstart</code> GitHub repository</a>.
This repository provides a faster start than building from <code>npm</code>.
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 <strong>AtScript</strong>. 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.
h4 ES6
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 <code>--watch</code> 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.
AtScript compiles to <strong>ES6</strong>, which is not widely supported in all browsers today.
The <code>es6-shim.js</code> file allows you to use ES6 or AtScript in the browser.
The repository includes a file <code>tsconfig.json</code>.
Many tools &mdash; including the TypeScript compiler &mdash;
know to read this file so we don't need to configure them or add command-line options.
h4 es6-shim
p.
The <strong>quickstart</strong> repository includes <code>es6-shim.js</code>.
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, <code>index.html</code> and
<code>app.es6</code>, both at the root of the project:
<code>app.ts</code>, 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 <code>.es6</code> extension signifies that the file uses ES6 syntax. If your editor doesn't
support syntax highlighting for .es6, use .js.
p Inside of <code>app.ts</code>, import the type definitions from Angular:
pre.prettyprint
code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
p Inside of <code>app.es6</code>, 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 <strong><code>&lt;my-app&gt;</code></strong>.
p.
A component consists of two parts, the <strong>annotation section</strong>
and the <strong>component controller</strong>.
A component consists of two parts, the <strong>component controller</strong>
which is an ES6 class, and the <strong>decorators</strong> 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 <code>class</code> syntax.
The component controller is the backing of the component's template. This component
controller uses TypeScript <code>class</code> 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 <code>app.es6</code>, call the <code>bootstrap()</code> function
At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> 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 <code>head</code> tag of <code>index.html</code>, include the <code>es6-shim.js</code> file.
(The es6-shim code must load before any application code.)
Then instantiate the <code>my-app</code> component in the <code>body</code>.
Inside the <code>head</code> tag of <code>index.html</code>,
include the traceur-runtime and the Angular bundle.
Instantiate the <code>my-app</code> component in the <code>body</code>.
pre.prettyprint.linenums
code.
@ -192,11 +189,12 @@
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="/quickstart/dist/es6-shim.js"&gt;&lt;/script&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- The app component created in app.es6 --&gt;
&lt;!-- The app component created in app.ts --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt;
@ -209,7 +207,7 @@
p.
The last step is to load the module for the <code>my-app</code> 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 <code>index.html</code>:
Add the System.js dependency in the <code>&lt;head&gt;</code> tag:
pre.prettyprint.linenums
code.
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;
// 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');
&lt;/script&gt;
&lt;head&gt;
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;/head&gt;
p.
The <code>System.paths</code> 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 <code>&lt;my-app&gt;</code> tag:
pre.prettyprint.linenums
code.
&lt;script&gt;System.import('app');&lt;/script&gt;
&lt;my-app&gt;&lt;/my-app&gt;
// STEP 8 - Run a local server ##########################