8000 Update quickstart to use TypeScript · rusongyu/angular.io@a3b66cb · GitHub
[go: up one dir, main page]
Skip to content

Commit a3b66cb

Browse files
alexeaglealexeagle
committed
Update quickstart to use TypeScript
1 parent bc12ba6 commit a3b66cb

File tree

1 file changed

+65
-77
lines changed

1 file changed

+65
-77
lines changed

‎public/docs/js/latest/quickstart.jade

Lines changed: 65 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,74 @@
11
.callout.is-helpful
2-
header Angular is still unpackaged and in alpha
2+
header Angular is in alpha
33
p.
44
This quickstart does not
5-
reflect the final build process for Angular. The following setup is for those who
5+
reflect the final development process for Angular. The following setup is for those who
66
want to try out Angular while it is in alpha.
77

88
// STEP 1 - Create a project ##########################
99
.l-main-section
1010
h2#section-create-project 1. Create a project
1111

1212
p.
13-
The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
14-
To get started, create a new directory.
13+
This quickstart shows how to write your Angular components in TypeScript. You could instead choose
14+
another language such as Dart, ES5, or ES6.
1515

16-
pre.prettyprint
17-
code.
18-
mkdir angular2_quickstart
19-
cd angular2_quickstart
20-
21-
// STEP 2 - Add the es6-shim ##########################
22-
.l-main-section
23-
h2#section-add-es6-shim 2. Clone the quickstart repository
24-
25-
p Within your project, clone the quickstart repository:
16+
p.
17+
The goal of this quickstart is to write a component in TypeScript that prints a string.
18+
To get started, clone the TypeScript quickstart repository:
2619

2720
pre.prettyprint
28-
code git clone https://github.com/angular/quickstart.git
21+
$ git clone https://github.com/angular/ts-quickstart.git
22+
$ cd ts-quickstart
2923

3024
p.
3125
For the sake of this quickstart we recommend using the
32-
<a href="https://github.com/angular/quickstart"> <code>quickstart</code> GitHub repository</a>.
33-
This repository provides a faster start than building from <code>npm</code>. This repository includes Angular and dependencies to compile ES6 in incompatible browsers.
34-
35-
.l-sub-section
36-
h3 ES6, AtScript, and the es6-shim
26+
<a href="https://github.com/angular/ts-quickstart"> <code>quickstart</code> GitHub repository</a>.
27+
This repository provides a faster start than building from <code>npm</code>.
28+
This repository includes the Angular distribution and type definitions for TypeScript.
3729

38-
h4 AtScript
39-
p.
40-
Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification
41-
of the JavaScript language. This quickstart features AtScript, but you can write Angular in ES5 or ES6 as well.
30+
// STEP 2 - Start the TypeScript compiler ##########################
31+
.l-main-section
32+
h2#start-tsc 2. Run the TypeScript compiler
4233

43-
h4 ES6
44-
p.
45-
AtScript compiles to <strong>ES6</strong>, which is not widely supported in all browsers today.
46-
The <code>es6-shim.js</code> file allows you to use ES6 or AtScript in the browser.
34+
p.
35+
Since the browser doesn't understand TypeScript code, we need to run a compiler to translate
36+
your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript
37+
compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
38+
are loaded, or configure your editor or IDE to do it.
39+
p.
40+
The repository includes a file <code>tsconfig.json</code>.
41+
Many tools &mdash; including the TypeScript compiler &mdash;
42+
know to read this file so we don't need to configure them or add command-line options.
4743

48-
h4 es6-shim
49-
p.
50-
The <strong>quickstart</strong> repository includes <code>es6-shim.js</code>.
51-
The es6-shim.js file includes dependencies (such as Traceur) needed to compile
52-
ES6 in the browser. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
44+
pre.prettyprint
45+
# We need to use an unreleased version of TypeScript
46+
$ npm install -g mhegazy/typescript#v1.5-beta
47+
$ tsc --watch
5348

5449
// STEP 3 - Import Angular ##########################
5550
.l-main-section
5651
h2#section-transpile 3. Import Angular
5752

5853
p.
5954
Create two files, <code>index.html</code> and
60-
<code>app.es6</code>, both at the root of the project:
55+
<code>app.ts</code>, both at the root of the project:
6156

6257
pre.prettyprint
63-
code.
64-
touch index.html
65-
touch app.es6
66-
67-
.alert.is-helpful.
68-
The <code>.es6</code> extension signifies that the file uses ES6 syntax. If your editor doesn't
69-
support syntax highlighting for .es6, use .js.
58+
$ touch index.html
59+
$ touch app.ts
7060

71-
p Inside of <code>app.es6</code>, import the required modules from Angular:
61+
p Inside of <code>app.ts</code>, import the type definitions from Angular:
62+
pre.prettyprint
63+
code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
7264

73-
pre.prettyprint.linenums
74-
code import {Component, Template, bootstrap} from 'angular2/angular2';
65+
p Now your editor should be able to complete the available imports:
66+
pre.prettyprint
67+
code import {Component, View, bootstrap} from 'angular2/angular2';
7568

7669
p.
77-
The above import statement uses ES6 module syntax to import three modules from Angular.
78-
These modules load at runtime.
70+
The above import statement uses ES6 module syntax to import three symbols from the Angular module.
71+
The module will load at runtime.
7972

8073

8174
// STEP 4 - Create a component ##########################
@@ -88,8 +81,9 @@
8881
that has an HTML tag named <strong><code>&lt;my-app&gt;</code></strong>.
8982

9083
p.
91-
A component consists of two parts, the <strong>annotation section</strong>
92-
and the <strong>component controller</strong>.
84+
A component consists of two parts, the <strong>component controller</strong>
85+
which is an ES6 class, and the <strong>decorators</strong> which tell Angular
86+
how to place the component into the page.
9387

9488
pre.prettyprint.linenums
9589
code.
@@ -102,6 +96,8 @@
10296
})
10397
// Component controller
10498
class MyAppComponent {
99+
name: string;
100+
105101
constructor() {
106102
this.name = 'Alice';
107103
}
@@ -134,12 +130,13 @@
134130
h3 The template and the component controller
135131

136132
p.
137-
The component controller is the backing of the component's template. A component
138-
controller uses ES6 <code>class</code> syntax.
133+
The component controller is the backing of the component's template. This component
134+
controller uses TypeScript <code>class</code> syntax.
139135

140136
pre.prettyprint.linenums
141137
code.
142138
class MyAppComponent {
139+
name: string;
143140
constructor() {
144141
this.name = 'Alice';
145142
}
@@ -163,7 +160,7 @@
163160
h2#section-transpile 5. Bootstrap
164161

165162
p.
166-
At the bottom of <code>app.es6</code>, call the <code>bootstrap()</code> function
163+
At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
167164
to load your new component into its page:
168165

169166
pre.prettyprint.linenums
@@ -182,21 +179,22 @@
182179
h2#section-angular-create-account 6. Declare the HTML
183180

184181
p.
185-
Inside the <code>head</code> tag of <code>index.html</code>, include the <code>es6-shim.js</code> file.
186-
(The es6-shim code must load before any application code.)
187-
Then instantiate the <code>my-app</code> component in the <code>body</code>.
182+
Inside the <code>head</code> tag of <code>index.html</code>,
183+
include the traceur-runtime and the Angular bundle.
184+
Instantiate the <code>my-app</code> component in the <code>body</code>.
188185

189186
pre.prettyprint.linenums
190187
code.
191188
&lt;!-- index.html --&gt;
192189
&lt;html&gt;
193190
&lt;head&gt;
194191
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
195-
&lt;script src="/quickstart/dist/es6-shim.js"&gt;&lt;/script&gt;
192+
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
193+
&lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt;
196194
&lt;/head&gt;
197195
&lt;body&gt;
198196

199-
&lt;!-- The app component created in app.es6 --&gt;
197+
&lt;!-- The app component created in app.ts --&gt;
200198
&lt;my-app&gt;&lt;/my-app&gt;
201199

202200
&lt;/body&gt;
@@ -209,7 +207,7 @@
209207

210208
p.
211209
The last step is to load the module for the <code>my-app</code> component.
212-
To do this, we'll use the System library, which is included in the quickstart repository.
210+
To do this, we'll use the System library.
213211

214212
.l-sub-section
215213
h3 System.js
@@ -219,31 +217,21 @@
219217
adds ES6 module loading functionality to browsers.
220218

221219
p.
222-
Add the following module-loading code to <code>index.html</code>:
220+
Add the System.js dependency in the <code>&lt;head&gt;</code> tag:
223221

224222
pre.prettyprint.linenums
225223
code.
226-
&lt;my-app&gt;&lt;/my-app&gt;
227-
228-
&lt;script&gt;
229-
// Rewrite the paths to load the files
230-
System.paths = {
231-
'angular2/*':'/quickstart/angular2/*.js', // Angular
232-
'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
233-
'app': 'app.es6' // The my-app component
234-
};
235-
236-
// Kick off the application
237-
System.import('app');
238-
&lt;/script&gt;
224+
&lt;head&gt;
225+
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
226+
&lt;/head&gt;
239227

240228
p.
241-
The <code>System.paths</code> property above specifies
242-
the paths to the following modules:
243-
ul
244-
li The Angular framework
245-
li Optional assertions for runtime type checking
246-
li The component to display on the page
229+
Add the following module-loading code before the <code>&lt;my-app&gt;</code> tag:
230+
231+
pre.prettyprint.linenums
232+
code.
233+
&lt;script&gt;System.import('app');&lt;/script&gt;
234+
&lt;my-app&gt;&lt;/my-app&gt;
247235

248236

249237
// STEP 8 - Run a local server ##########################

0 commit comments

Comments
 (0)
0