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

134
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>.
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
$ 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
code-example.
$ touch app.ts index.html
// 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
are loaded, or configure your editor or IDE to do it.
pre.prettyprint
code-example.
$ npm install -g typescript@^1.5.0-beta
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
@ -54,12 +54,12 @@
h2#section-transpile 3. Import Angular
p Inside of <code>app.ts</code>, import the type definitions from Angular:
pre.prettyprint
code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
code-example.
&lt;reference path="typings/angular2/angular2.d.ts" &gt;
p Now your editor should be able to complete the available imports:
pre.prettyprint
code import {Component, View, bootstrap} from 'angular2/angular2';
code-example.
import {Component, View, bootstrap} from 'angular2/angular2';
p.
The above import statement uses ES6 module syntax to import three symbols from the Angular module.
@ -80,23 +80,22 @@
which is an ES6 class, and the <strong>decorators</strong> which tell Angular
how to place the component into the page.
pre.prettyprint.linenums
code.
// Annotation section
@Component({
selector: 'my-app'
})
@View({
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
})
// Component controller
class MyAppComponent {
name: string;
code-example(language="javascript" format="linenums").
// Annotation section
@Component({
selector: 'my-app'
})
@View({
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
})
// Component controller
class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
constructor() {
this.name = 'Alice';
}
}
.l-sub-section
h3 @Component and @View annotations
@ -108,14 +107,13 @@
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.
pre.prettyprint.linenums
code.
@Component({
selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
})
@View({
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
})
code-example(language="javascript" format="linenums").
@Component({
selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
})
@View({
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
})
p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
@ -128,14 +126,13 @@
The component controller is the backing of the component's template. This component
controller uses TypeScript <code>class</code> syntax.
pre.prettyprint.linenums
code.
class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
code-example(language="javascript" format="linenums").
class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
}
p.
Templates read from their component controllers. Templates have access to any properties
@ -158,8 +155,8 @@
At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
to load your new component into its page:
pre.prettyprint.linenums
code bootstrap(MyAppComponent);
code-example(language="javaScript").
bootstrap(MyAppComponent);
p.
@ -178,22 +175,21 @@
include the traceur-runtime and the Angular bundle.
Instantiate the <code>my-app</code> component in the <code>body</code>.
pre.prettyprint.linenums
code.
&lt;!-- index.html --&gt;
&lt;html&gt;
&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="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
code-example(language="html" format="linenums").
&lt;!-- index.html --&gt;
&lt;html&gt;
&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="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- The app component created in app.ts --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;!-- The app component created in app.ts --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/body&gt;
&lt;/html&gt;
// STEP 7 - Declare the HTML ##########################
.l-main-section
@ -215,22 +211,20 @@
Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that
it looks like:
pre.prettyprint.linenums
code.
&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="https://jspm.io/system@0.16.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;
code-example(language="html" format="linenums").
&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="https://jspm.io/system@0.16.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:
pre.prettyprint.linenums
code.
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;System.import('app');&lt;/script&gt;
code-example(language="html" format="linenums").
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;System.import('app');&lt;/script&gt;
// STEP 8 - Run a local server ##########################
@ -247,11 +241,11 @@
<code><b>sudo</b> npm ...</code>)
For example:
pre.prettyprint.code.
# From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html
code-example.
# From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html
// WHAT'S NEXT... ##########################

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

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