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

Revert "Copyedit of JS quick start" 

This reverts commit d56ede4e53.
This commit is contained in:
Kathy Walrath 2015-03-04 16:31:09 -08:00
parent b3d8bea11c
commit 9cc3d7141a
2 changed files with 81 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/docs/dart/latest/quickstart.jade
View File

@ -52,6 +52,7 @@ p.
will be higher than alpha 6. That's fine. will be higher than alpha 6. That's fine.
// PENDING: Update once 1.9 is on stable channel. // PENDING: Update once 1.9 is on stable channel.
// TODO: Convert the above to a callout.
// STEP 2 - Import Angular ########################## // STEP 2 - Import Angular ##########################
@ -151,11 +152,16 @@ p.
of its component controller. of its component controller.
The template above binds to a <code>name</code> property through The template above binds to a <code>name</code> property through
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>). the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
p.
The component controller assigns "Alice" to the name property. When the The component controller assigns "Alice" to the name property. When the
template renders, "Hello Alice" appears instead of template renders, "Hello Alice" appears instead of
<span ng-non-bindable>"Hello {{ name }}"</span>. <span ng-non-bindable>"Hello {{ name }}"</span>.
// [PENDING: Do we really want to use the term "component controller"?
// If so, set it up beforehand.
// In the original text, what does "the backing" mean, and is it
// important that we keep it?]
pre.prettyprint pre.prettyprint
code. code.
class AppComponent { class AppComponent {
@ -258,4 +264,4 @@ p.
to get the latest version of Angular 2. to get the latest version of Angular 2.
// [PENDING: Perhaps point to dartlang.org.] // [PENDING: really?] Perhaps point to dartlang.org.

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

@ -20,7 +20,7 @@ p.
.l-main-section .l-main-section
h2#section-add-es6-shim 2. Add the es6-shim h2#section-add-es6-shim 2. Add the es6-shim
p Within your project, clone the es6-shim repository: p. Within your project, clone the es6-shim repository:
pre.prettyprint pre.prettyprint
code git clone https://github.com/davideast/conscious.git es6-shim code git clone https://github.com/davideast/conscious.git es6-shim
@ -28,7 +28,7 @@ p.
p. p.
For the sake of this quickstart we recommend using the For the sake of this quickstart we recommend using the
<a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>. <a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>.
This repository provides a faster start than building from <code>npm</code>. The <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers. This repository will provides a faster start than building from <code>npm</code>. The <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
.l-sub-section .l-sub-section
h3 ES6, AtScript, and the es6-shim h3 ES6, AtScript, and the es6-shim
@ -36,22 +36,19 @@ p.
h4 AtScript h4 AtScript
p. p.
Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification
of the JavaScript language. This quickstart features AtScript, but Angular of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular.
doesn't require you to write AtScript.
h4 ES6 h4 ES6
p. p.
AtScript compiles to <strong>ES6</strong>, which is not widely supported in all browsers today. AtScript compiles to <strong>ES6</strong>. ES6 is not widely supported in all browsers today.
The es6-shim repository allows you to use ES6 or AtScript in the browser. The es6-shim repository allows you to use ES6 or AtScript in the browser.
h4 es6-shim h4 es6-shim
p. p.
The <strong>es6-shim</strong> package includes Angular and dependencies The <strong>es6-shim</strong> package includes Angular and dependencies needed to compile
(such as Traceur) needed to compile ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
ES6 in the browser. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. Think of the es6-shim repository as package rather than a project.
Think of the es6-shim repository as a package rather than a project.
// PENDING: "Think of ... as a package" could be clearer.
// STEP 2 - Import Angular ########################## // STEP 2 - Import Angular ##########################
@ -59,24 +56,20 @@ p.
h2#section-transpile 2. Import Angular h2#section-transpile 2. Import Angular
p. p.
Create two files, <code>index.html</code> and Create two files for this quickstart, an <code>index.html</code> and a
<code>app.es6</code>, both at the root of the project: <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.
pre.prettyprint pre.prettyprint.linenums
code. code touch index.html
touch index.html | touch app.es6
touch app.es6
.alert.is-helpful The <code>.es6</code> extension signifies that the file uses ES6 syntax. p Inside of <code>app.es6</code>, use the ES6 module syntax you can import the required modules from Angular.
p Inside of <code>app.es6</code>, import the required modules from Angular:
pre.prettyprint.linenums pre.prettyprint.linenums
code import {Component, Template, bootstrap} from 'angular2/angular2'; code import {Component, Template, bootstrap} from 'angular2/angular2';
p. p The above import statement will import three modules from Angular. These modules load at runtime.
The above import statement uses ES6 module syntax to import three modules from Angular.
These modules load at runtime.
// STEP 3 - Create a component ########################## // STEP 3 - Create a component ##########################
@ -85,23 +78,24 @@ p.
h2#section-angular-create-account 3. Define a component h2#section-angular-create-account 3. Define a component
p. p.
Components structure and represent the UI. This quickstart demonstrates the process of creating a component Components structure and represent the UI. This quickstart demonstrates the process of creating a component.
that has an HTML tag named <strong><code>&lt;my-app&gt;</code></strong>. The component will have an HTML tag named app,
<strong><code>&lt;my-app&gt;&lt;/my-app&gt;</code></strong>.
p. p.
A component consists of two parts, the <strong>annotation section</strong> A component consists of two parts; the <strong>annotation section</strong>
and the <strong>component controller</strong>. and the <strong>component controller</strong>.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
// Annotation section // Annotation Section
@Component({ @Component({
selector: 'my-app' selector: 'my-app'
}) })
@Template({ @Template({
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
}) })
// Component controller // Component Controller
class MyAppComponent { class MyAppComponent {
constructor() { constructor() {
this.name = 'Alice'; this.name = 'Alice';
@ -109,20 +103,20 @@ p.
} }
.l-sub-section .l-sub-section
h3 Component annotations h3 Component Annotations
p. p.
A component annotation provides metadata about the component. A component annotation provides metadata about the component.
An annotation can be identified by its at-sign (<code>@</code>). An annotation can always identified by its at-sign (<code>@</code>).
p. p.
The <code>@Component</code> annotation defines The <code>@Component</code> annotation defines the HTML tag for the component.
the HTML tag for the component by specifying the component's CSS selector. The <code>selector</code> property is a CSS selector which specifies the HTML tag for the component.
p. p.
The <code>@Template</code> annotation defines the HTML that The <code>@Template</code> annotation defines the template to apply to the component.
represents the component. This component uses an inline template, This component uses an inline template, but external templates are
but you can also have an external template. To use an external template, available as well. To use an external template specify a <code>url</code> property
specify a <code>url</code> property and give it the path to the html file.
and give it the path to the HTML file.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
@ -134,11 +128,11 @@ p.
}) })
p. p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code> The component created above has a HTML tag of <code>&lt;my-app&gt;&lt;/my-app&gt;</code>
and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>. and a template of <code>&lt;h1&gt;Hello <code>{{</code> name }}&lt;/h1&gt;</code>.
.l-sub-section .l-sub-section
h3 The template and the component controller h3 Component Controller
p. p.
The component controller is the backing of the component's template. A component The component controller is the backing of the component's template. A component
@ -157,11 +151,9 @@ p.
or functions placed on the component controller. or functions placed on the component controller.
p. p.
The template above binds to a <code>name</code> property through The template above binds to a <code>name</code> property through the <code>{{ }}</code>
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>). syntax.The body of the constructor assigns "Alice" to the name property. When the
The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of <code>{{ name }}</code>.
template renders, "Hello Alice" appears instead of
<span ng-non-bindable>"Hello {{ name }}"</span>.
@ -169,18 +161,17 @@ p.
.l-main-section .l-main-section
h2#section-transpile 4. Bootstrap h2#section-transpile 4. Bootstrap
p. p The last step to load the component on the page. At the bottom of <code>app.es6</code> call the <code>bootstrap()</code> function.
At the bottom of <code>app.es6</code>, call the <code>bootstrap()</code> function
to load your new component into its page:
pre.prettyprint.linenums pre.prettyprint.linenums
code bootstrap(MyAppComponent); code bootstrap(MyAppComponent);
p. p.
The <code>bootstrap()</code> function takes a Angular provides a <code>bootstrap</code> function that renders a
component as a parameter, enabling the component component to the page. The <code>bootstrap</code> function takes a
(as well as any child components it contains) to render. component as a parameter. Any child components inside of the parent
component will render as well.
// STEP 5 - Declare the HTML ########################## // STEP 5 - Declare the HTML ##########################
@ -189,9 +180,8 @@ p.
h2#section-angular-create-account 5. Declare the HTML h2#section-angular-create-account 5. Declare the HTML
p. p.
Inside the <code>head</code> tag of <code>index.html</code>, include the <code>es6-shim.js</code> file. Inside of the <code>index.html</code>, include the <code>es6-shim.js</code> file in the <code>head</code> tag.
(The es6-shim code must load before any application code.) Now, declare the app component the <code>body</code>. The es6-shim must load before any application code.
Then instantiate the <code>my-app</code> component in the <code>body</code>.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
@ -212,54 +202,53 @@ p.
// STEP 6 - Declare the HTML ########################## // STEP 6 - Declare the HTML ##########################
.l-main-section .l-main-section
h2#section-load-component-module 6. Load the component h2#section-load-component-module 5. Load the component
p. p.
The last step is to load the module for the <code>my-app</code> component. The last step is to load the module for the my-app component.
To do this, we'll use the System library, The es6-shim file comes packaged with the System library. We'll
which is included in es6-shim. use System to load the component we created above.
.l-sub-section .l-sub-section
h3 System.js h3 System.js
p. p.
System is a third-party open-source library that System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System
adds ES6 module loading functionality to browsers. provides module loading functionality to these browsers.
p. p.
Add the following module-loading code to <code>index.html</code>: To load the needed modules, System needs to know where to
load the files from. The paths property in System specifies
the location of the files.
pre.prettyprint.linenums p Tell System about three paths:
code. ol
&lt;my-app&gt;&lt;/my-app&gt; li Angular: The Angular framework.
li Runtime assertions: Optional assertions for runtime type checking.
li The my-app component created above: The component to display on the page.
&lt;script&gt; pre.prettyprint.linenums
// Rewrite the paths to load the files code.
System.paths = { &lt;my-app&gt;&lt;/my-app&gt;
'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 &lt;script&gt;
System.import('app'); // Rewrite the paths to load the files
&lt;/script&gt; System.paths = {
'angular2/*':'/es6-shim/angular2/*.js', // Angular
'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions
'app': 'app.es6' // The my-app component
};
p. // Kick off the application
The <code>System.paths</code> property above specifies System.import('app');
the paths to the following modules: &lt;/script&gt;
ul
li The Angular framework
li Optional assertions for runtime type checking
li The component to display on the page
// STEP 6 - Declare the HTML ##########################
// STEP 6 - Run a local server ##########################
.l-main-section .l-main-section
h2#section-load-component-module 6. Run a local server h2#section-load-component-module 5. Run a local server
// PENDING: add directions (or at least hints) here
// WHAT'S NEXT... ########################## // WHAT'S NEXT... ##########################
.l-main-section .l-main-section