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

merge with master

This commit is contained in:
Alex Wolfe 2015-03-02 19:16:09 -08:00
parent c1fd3477fe c9f6c832b4
commit 7791ed9209
2 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/js/2_0_0-alpha_11/quickstart.jade
View File

@ -1,3 +1 @@
h1 JavaScript Quickstart
!= partial("../_quickstart", public.docs.js._data)

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

@ -18,19 +18,18 @@
code git clone https://github.com/davideast/concious.git es6-shim
.l-sub-section
h3 A word on ES6
h3 The <code>es6-shim</code>
p.
Angular builds on top of ES6, the new specification of the JavaScript language.
Not all ES6 features are available in all browsers. The following es6-shim
repository allows you to use ES6 in the browser today.
p.
Angular is available on npm. Configuring Angular to run ES6 in the browser
requires a build process, detailed here.
ES6 is not widely supported in all browsers today. The following es6-shim
repository allows you to use ES6 in the browser.
p.
The es6-shim package includes Angular and dependencies needed to compile
ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
p.
Think of the es6-shim repository as package rather than a new project.
@ -39,14 +38,18 @@
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.
p This quickstart will create a component that renders "Hello Alice" to the page.
p 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.
@ -56,35 +59,34 @@
h2#section-angular-create-account 3. Create a component
p.
Components are custom HTML elements. Angular uses components to empower HTML.
Components structure and represent 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;
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,
<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: `
&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
`
inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;`
})
// 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 +94,13 @@
A component annotation provides metadata 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 +108,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
@ -124,8 +126,8 @@
controller uses ES6 <code>class</code> syntax.
pre.prettyprint.linenums
code
class AppComponent {
code.
class MyAppComponent {
constructor() {
this.name = "Alice";
}
@ -157,7 +159,7 @@
component will render as well.
pre.prettyprint.linenums
code bootstrap(AppComponent);
code bootstrap(MyAppComponent);
@ -167,30 +169,29 @@
h2#section-angular-create-account 5. Declare the HTML
p.
Create an <code>index.html</code> file at the root of the project.
Include the <code>es6-shim.js</code> file in the <code>head</code> tag.
Now, declare the app component the <code>body</code>. The es6-shim must
load before any application code.
Inside of the <code>index.html</code>, include the <code>es6-shim.js</code> file in the <code>head</code> tag.
Now, declare the app component the <code>body</code>. The es6-shim must load before any application 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="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&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;
.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 +205,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 +217,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