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

Update the quickstart for alpha22.

Browse Source 
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

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

@ -1,9 +1,8 @@
.callout.is-helpful .callout.is-helpful
header Angular is in developer preview header Angular is in developer preview
p. p.
This quickstart does not This quickstart does not reflect the final development process for writing apps with Angular.
reflect the final development process for Angular. The following setup is for those who The following setup is for those who want to try out Angular while it is in developer preview.
want to try out Angular while it is in developer preview.
// STEP 1 - Create a project ########################## // STEP 1 - Create a project ##########################
.l-main-section .l-main-section
@ -15,24 +14,26 @@
p. p.
The goal of this quickstart is to write a component in TypeScript that prints a string. The goal of this quickstart is to write a component in TypeScript that prints a string.
To get started, clone the TypeScript quickstart repository: We assume you have already installed <a href="https://docs.npmjs.com/getting-started/installing-node">Node and npm</a>.
pre.prettyprint
$ git clone https://github.com/angular/ts-quickstart.git
$ cd ts-quickstart
p. p.
For the sake of this quickstart we recommend using the To get started, create a new empty project directory. All the following commands should be run
<a href="https://github.com/angular/ts-quickstart"> <code>quickstart</code> GitHub repository</a>. from this directory.
This repository provides a faster start than building from <code>npm</code>.
This repository includes the Angular distribution and type definitions for TypeScript.
p. p.
Create two files, <code>index.html</code> and To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor.
<code>app.ts</code>, both at the root of the project: 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 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 ########################## // STEP 2 - Start the TypeScript compiler ##########################
.l-main-section .l-main-section
@ -43,14 +44,10 @@
your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript 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 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. 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 pre.prettyprint
$ npm install -g typescript@^1.5.0-beta $ npm install -g typescript@^1.5.0-beta
$ tsc --watch $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
// STEP 3 - Import Angular ########################## // STEP 3 - Import Angular ##########################
.l-main-section .l-main-section
@ -188,7 +185,7 @@
&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="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.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;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
@ -224,11 +221,11 @@
&lt;title&gt;Angular 2 Quickstart&lt;/title&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="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="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; &lt;/head&gt;
p. 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 pre.prettyprint.linenums
code. code.