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

quick start updated

This commit is contained in:
Alex Wolfe 2015-05-19 08:48:26 -07:00
parent b707aed54b
commit 8c65545cc8
2 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,14 +25,14 @@
TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>. 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>. 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 code-example.
$ npm install -g tsd $ npm install -g tsd
$ tsd query angular2 --action install $ tsd query angular2 --action install
p. p.
Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project: Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
pre.prettyprint code-example.
$ touch app.ts index.html $ touch app.ts index.html
// STEP 2 - Start the TypeScript compiler ########################## // STEP 2 - Start the TypeScript compiler ##########################
@ -45,7 +45,7 @@
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.
pre.prettyprint code-example.
$ npm install -g typescript@^1.5.0-beta $ npm install -g typescript@^1.5.0-beta
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
@ -54,12 +54,12 @@
h2#section-transpile 3. Import Angular h2#section-transpile 3. Import Angular
p Inside of <code>app.ts</code>, import the type definitions from Angular: p Inside of <code>app.ts</code>, import the type definitions from Angular:
pre.prettyprint code-example.
code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt; &lt;reference path="typings/angular2/angular2.d.ts" &gt;
p Now your editor should be able to complete the available imports: p Now your editor should be able to complete the available imports:
pre.prettyprint code-example.
code import {Component, View, bootstrap} from 'angular2/angular2'; import {Component, View, bootstrap} from 'angular2/angular2';
p. p.
The above import statement uses ES6 module syntax to import three symbols from the Angular module. The above import statement uses ES6 module syntax to import three symbols from the Angular module.
@ -80,8 +80,7 @@
which is an ES6 class, and the <strong>decorators</strong> which tell Angular which is an ES6 class, and the <strong>decorators</strong> which tell Angular
how to place the component into the page. how to place the component into the page.
pre.prettyprint.linenums code-example(language="javascript" format="linenums").
code.
// Annotation section // Annotation section
@Component({ @Component({
selector: 'my-app' selector: 'my-app'
@ -108,8 +107,7 @@
p. p.
The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file. The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
pre.prettyprint.linenums code-example(language="javascript" format="linenums").
code.
@Component({ @Component({
selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
}) })
@ -128,8 +126,7 @@
The component controller is the backing of the component's template. This component The component controller is the backing of the component's template. This component
controller uses TypeScript <code>class</code> syntax. controller uses TypeScript <code>class</code> syntax.
pre.prettyprint.linenums code-example(language="javascript" format="linenums").
code.
class MyAppComponent { class MyAppComponent {
name: string; name: string;
constructor() { constructor() {
@ -158,8 +155,8 @@
At the bottom of <code>app.ts</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 code-example(language="javaScript").
code bootstrap(MyAppComponent); bootstrap(MyAppComponent);
p. p.
@ -178,8 +175,7 @@
include the traceur-runtime and the Angular bundle. include the traceur-runtime and the Angular bundle.
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 code-example(language="html" format="linenums").
code.
&lt;!-- index.html --&gt; &lt;!-- index.html --&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
@ -215,8 +211,7 @@
Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that
it looks like: it looks like:
pre.prettyprint.linenums code-example(language="html" format="linenums").
code.
&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;
@ -227,8 +222,7 @@
p. p.
Add the following module-loading code: Add the following module-loading code:
pre.prettyprint.linenums code-example(language="html" format="linenums").
code.
&lt;my-app&gt;&lt;/my-app&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;System.import('app');&lt;/script&gt; &lt;script&gt;System.import('app');&lt;/script&gt;
@ -247,7 +241,7 @@
<code><b>sudo</b> npm ...</code>) <code><b>sudo</b> npm ...</code>)
For example: For example:
pre.prettyprint.code. code-example.
# From the directory that contains index.html: # From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080 http-server # Creates a server at localhost:8080

1
public/resources/css/module/_code.scss
View File

@ -50,6 +50,7 @@
code { code {
background: none; background: none;
font-size: 15px; font-size: 15px;
padding: 0px;
} }
ol { ol {