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

QS revisions.

This commit is contained in:
David East 2015-03-02 16:53:46 -08:00
parent cf4cf8503c
commit 55072f00a4
1 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,14 +39,15 @@
h2#section-transpile 2. Import Angular
p.
Create a file named <code>app.es6</code> at the root of the project.
This quickstart will consist of two files, an <code>index.html</code> and a
<code>app.es6</code>. Both of these files will be at the root of the project.
The <code>.es6</code> extension signifies that the file uses ES6 syntax.
Using the ES6 module syntax you can import the required modules from Angular2.
pre.prettyprint.linenums
code import {Component, Template, bootstrap} from 'angular2/angular2';
p The above import statement will import the three modules from Angular. These modules load at runtime.
p The above import statement will import three modules from Angular. These modules load at runtime.
@ -58,20 +59,19 @@
p.
Components are custom HTML elements. Angular uses components to empower HTML.
Components structure and repre.prettyprint.linenumssent the UI. This quickstart
demonstrates the process of creating a component. This component will have the tag of app.
pre.prettyprint.linenums
code &lt;app&gt;&lt;/app&gt;
demonstrates the process of creating a component. This component will have the tag of app,
<code>&lt;my-app&gt;&lt;/my-app&gt;</code>.
p A component consists of two parts; the annotation section and the component controller.
pre.prettyprint.linenums
code.
// app.es6
import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation Section
@Component({
selector: 'app'
selector: 'my-app'
})
@Template({
inline: `
@ -79,11 +79,14 @@
`
})
// Component Controller
class AppComponent {
class MyAppComponent {
constructor() {
this.name = "Alice";
}
}
// Render the app to the page
bootstrap(MyAppComponent);
.l-sub-section
h3 Component Annotations
@ -92,11 +95,13 @@
A component annotation provides meta-data about the <code>component</code>.
An annotation can always identified by its at-sign — <code>@</code>.
p.
The <code>@Component</code> annotation defines the HTML tag for the component.
The <code>@Component</code> annotation defines the HTML tag for the component. The <code>@Component</code>
annotation is imported in the first line of <code>app.es6</code>.
The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p.
The <code>@Template</code> annotation defines the template to apply to the
The <code>@Template</code> annotation defines the template to apply to the The <code>@Template</code>
annotation is imported in the first line of <code>app.es6</code>.
component. This component uses an inline template, but external templates are
available as well. To use an external template specify a <code>url</code> property
and give it the path to the html file.
@ -104,17 +109,15 @@
pre.prettyprint.linenums
code.
@Component({
selector: 'app'
selector: 'app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
})
@Template({
inline: `
&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
`
inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;` // Defines the inline template for the component
})
p.
The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code>
and a template of <code>&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;</code>.
and a template of <code>&lt;h1&gt;Hello <code>{{</code> name }}&lt;/h1&gt;</code>.
.l-sub-section
h3 Component Controller
@ -125,11 +128,11 @@
pre.prettyprint.linenums
code
class AppComponent {
constructor() {
this.name = "Alice";
}
}
| class MyAppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
p.
Templates read from their component controllers. Templates have access to any properties
@ -157,7 +160,7 @@
component will render as well.
pre.prettyprint.linenums
code bootstrap(AppComponent);
code bootstrap(MyAppComponent);
@ -174,6 +177,7 @@
pre.prettyprint.linenums
code.
&lt;!-- index.html --&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
@ -182,7 +186,7 @@
&lt;body&gt;
<!-- -->
&lt;!-- The app component created in app.es6 --&gt;
&lt;app&gt;&lt;/app&gt;
&lt;my-app&gt;&lt;/my-app&gt;
<!-- -->
&lt;/body&gt;
&lt;/html&gt;
@ -190,7 +194,7 @@
.l-sub-section
h3 Load the component module
p.
The last step is to load the module for the app component.
The last step is to load the module for the my-app component.
The es6-shim file comes packaged with the System library.
Most browsers today do not support ES6 module loading. System
provides module loading functionality to these browsers.
@ -204,10 +208,11 @@
ol
li Angular - The Angular framework.
li Runtime assertions - Optional assertions for runtime type checking.
li The app component created above - The component to display on the page.
li The my-app component created above - The component to display on the page.
pre.prettyprint.linenums
code.
&lt;!-- index.html --&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
@ -215,15 +220,15 @@
&lt;/head&gt;
&lt;body&gt;
&lt;!-- The app component created in app.es6 --&gt;
&lt;app&gt;&lt;/app&gt;
&lt;!-- The my-app component created in app.es6 --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;
// Rewrite the paths to load the files
System.paths = {
'angular2/*':'/es6-shim/angular2/*.js',
'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
'app': 'app.es6'
'angular2/*':'/es6-shim/angular2/*.js', // Angular
'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application