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

Update the quickstart for alpha22. 

We no longer need to use the quickstart repo since the published bundle works with Decorators.
This commit is contained in:
Alex Eagle 2015-05-07 18:24:40 -07:00 committed by Naomi Black
parent bd947b2cf6
commit a40310d842
1 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,8 @@
.callout.is-helpful
header Angular is in developer preview
p.
This quickstart does not
reflect the final development process for Angular. The following setup is for those who
want to try out Angular while it is in developer preview.
This quickstart does not reflect the final development process for writing apps with Angular.
The following setup is for those who want to try out Angular while it is in developer preview.
// STEP 1 - Create a project ##########################
.l-main-section
@ -15,24 +14,26 @@
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
$ git clone https://github.com/angular/ts-quickstart.git
$ cd ts-quickstart
We assume you have already installed <a href="https://docs.npmjs.com/getting-started/installing-node">Node and npm</a>.
p.
For the sake of this quickstart we recommend using the
<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.
To get started, create a new empty project directory. All the following commands should be run
from this directory.
p.
Create two files, <code>index.html</code> and
<code>app.ts</code>, both at the root of the project:
To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor.
TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
pre.prettyprint
$ touch app.ts index.html
$ npm install -g tsd
$ tsd query angular2 --action install
p.
Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
pre.prettyprint
$ touch app.ts index.html
// STEP 2 - Start the TypeScript compiler ##########################
.l-main-section
@ -43,14 +44,10 @@
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.
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.
pre.prettyprint
$ npm install -g typescript@^1.5.0-beta
$ tsc --watch
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
// STEP 3 - Import Angular ##########################
.l-main-section
@ -188,7 +185,7 @@
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&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;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
@ -224,11 +221,11 @@
&lt;title&gt;Angular 2 Quickstart&lt;/title&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="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
p.
Add the following module-loading code before the <code>&lt;my-app&gt;</code> tag:
Add the following module-loading code:
pre.prettyprint.linenums
code.