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

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

@ -1,8 +1,8 @@
.callout.is-helpful .callout.is-helpful
header Angular is still unpackaged and in alpha header Angular is in alpha
p. p.
This quickstart does not 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. want to try out Angular while it is in alpha.
// STEP 1 - Create a project ########################## // STEP 1 - Create a project ##########################
@ -10,46 +10,41 @@
h2#section-create-project 1. Create a project h2#section-create-project 1. Create a project
p. p.
The goal of this quickstart is to create a component that renders "Hello Alice" to the page. This quickstart shows how to write your Angular components in TypeScript. You could instead choose
To get started, create a new directory. 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 pre.prettyprint
code. $ git clone https://github.com/angular/ts-quickstart.git
mkdir angular2_quickstart $ cd ts-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
p. p.
For the sake of this quickstart we recommend using the For the sake of this quickstart we recommend using the
<a href="https://github.com/angular/quickstart"> <code>quickstart</code> GitHub repository</a>. <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 Angular and dependencies to compile ES6 in incompatible browsers. 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 // STEP 2 - Start the TypeScript compiler ##########################
h3 ES6, AtScript, and the es6-shim .l-main-section
h2#start-tsc 2. Run the TypeScript compiler
h4 AtScript p.
p. Since the browser doesn't understand TypeScript code, we need to run a compiler to translate
Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript
of the JavaScript language. This quickstart features AtScript, but you can write Angular in ES5 or ES6 as well. 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.
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 pre.prettyprint
p. # We need to use an unreleased version of TypeScript
AtScript compiles to <strong>ES6</strong>, which is not widely supported in all browsers today. $ npm install -g mhegazy/typescript#v1.5-beta
The <code>es6-shim.js</code> file allows you to use ES6 or AtScript in the browser. $ tsc --watch
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.
// STEP 3 - Import Angular ########################## // STEP 3 - Import Angular ##########################
.l-main-section .l-main-section
@ -57,25 +52,23 @@
p. p.
Create two files, <code>index.html</code> and 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 pre.prettyprint
code. $ touch index.html
touch index.html $ touch app.ts
touch app.es6
.alert.is-helpful. p Inside of <code>app.ts</code>, import the type definitions from Angular:
The <code>.es6</code> extension signifies that the file uses ES6 syntax. If your editor doesn't pre.prettyprint
support syntax highlighting for .es6, use .js. code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
p Inside of <code>app.es6</code>, import the required modules from Angular: p Now your editor should be able to complete the available imports:
pre.prettyprint
pre.prettyprint.linenums code import {Component, View, bootstrap} from 'angular2/angular2';
code import {Component, Template, bootstrap} from 'angular2/angular2';
p. p.
The above import statement uses ES6 module syntax to import three modules from Angular. The above import statement uses ES6 module syntax to import three symbols from the Angular module.
These modules load at runtime. The module will load at runtime.
// STEP 4 - Create a component ########################## // STEP 4 - Create a component ##########################
@ -88,8 +81,9 @@
that has an HTML tag named <strong><code>&lt;my-app&gt;</code></strong>. that has an HTML tag named <strong><code>&lt;my-app&gt;</code></strong>.
p. p.
A component consists of two parts, the <strong>annotation section</strong> A component consists of two parts, the <strong>component controller</strong>
and 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 pre.prettyprint.linenums
code. code.
@ -102,6 +96,8 @@
}) })
// Component controller // Component controller
class MyAppComponent { class MyAppComponent {
name: string;
constructor() { constructor() {
this.name = 'Alice'; this.name = 'Alice';
} }
@ -134,12 +130,13 @@
h3 The template and the component controller h3 The template and the component controller
p. p.
The component controller is the backing of the component's template. A component The component controller is the backing of the component's template. This component
controller uses ES6 <code>class</code> syntax. controller uses TypeScript <code>class</code> syntax.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
class MyAppComponent { class MyAppComponent {
name: string;
constructor() { constructor() {
this.name = 'Alice'; this.name = 'Alice';
} }
@ -163,7 +160,7 @@
h2#section-transpile 5. Bootstrap h2#section-transpile 5. Bootstrap
p. 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: to load your new component into its page:
pre.prettyprint.linenums pre.prettyprint.linenums
@ -182,9 +179,9 @@
h2#section-angular-create-account 6. Declare the HTML h2#section-angular-create-account 6. Declare the HTML
p. p.
Inside the <code>head</code> tag of <code>index.html</code>, include the <code>es6-shim.js</code> file. Inside the <code>head</code> tag of <code>index.html</code>,
(The es6-shim code must load before any application code.) include the traceur-runtime and the Angular bundle.
Then instantiate the <code>my-app</code> component in the <code>body</code>. Instantiate the <code>my-app</code> component in the <code>body</code>.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
@ -192,11 +189,12 @@
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&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;/head&gt;
&lt;body&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;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt; &lt;/body&gt;
@ -209,7 +207,7 @@
p. p.
The last step is to load the module for the <code>my-app</code> component. 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 .l-sub-section
h3 System.js h3 System.js
@ -219,31 +217,21 @@
adds ES6 module loading functionality to browsers. adds ES6 module loading functionality to browsers.
p. 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 pre.prettyprint.linenums
code. code.
&lt;my-app&gt;&lt;/my-app&gt; &lt;head&gt;
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;script&gt; &lt;/head&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;
p. p.
The <code>System.paths</code> property above specifies Add the following module-loading code before the <code>&lt;my-app&gt;</code> tag:
the paths to the following modules:
ul pre.prettyprint.linenums
li The Angular framework code.
li Optional assertions for runtime type checking &lt;script&gt;System.import('app');&lt;/script&gt;
li The component to display on the page &lt;my-app&gt;&lt;/my-app&gt;
// STEP 8 - Run a local server ########################## // STEP 8 - Run a local server ##########################