iSharkFly-Docs
/
angular-docs-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>. 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,23 +80,22 @@
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' })
}) @View({
@View({ template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' })
}) // Component controller
// Component controller class MyAppComponent {
class MyAppComponent { name: string;
name: string;
constructor() { constructor() {
this.name = 'Alice'; this.name = 'Alice';
}
} }
}
.l-sub-section .l-sub-section
h3 @Component and @View annotations h3 @Component and @View annotations
@ -108,14 +107,13 @@
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 })
}) @View({
@View({ template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component })
})
p. p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code> 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 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() { this.name = 'Alice';
this.name = 'Alice';
}
} }
}
p. p.
Templates read from their component controllers. Templates have access to any properties 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 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,22 +175,21 @@
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; &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://code.angularjs.org/2.0.0-alpha.22/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;
&lt;!-- The app component created in app.ts --&gt; &lt;!-- The app component created in app.ts --&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
// STEP 7 - Declare the HTML ########################## // STEP 7 - Declare the HTML ##########################
.l-main-section .l-main-section
@ -215,22 +211,20 @@
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; &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="https://code.angularjs.org/2.0.0-alpha.22/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: 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;
// STEP 8 - Run a local server ########################## // STEP 8 - Run a local server ##########################
@ -247,11 +241,11 @@
<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
# In a browser, visit localhost:8080/index.html # In a browser, visit localhost:8080/index.html
// WHAT'S NEXT... ########################## // WHAT'S NEXT... ##########################

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 {