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

Revisions.

This commit is contained in:
David East 2015-02-28 21:58:27 -08:00
parent a04be1cd25
commit 890be79ded
1 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/docs/_quickstart.jade
View File

@ -12,15 +12,20 @@
header header
h3#section-install-angular Install Angular h3#section-install-angular Install Angular
p p
| To include Angular in your project you'll need to install the framework and its dependencies from <code>npm</code>. b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular.
b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular. | The following setup is for those who want to try out Angular while it is in alpha.
| The following setup is for those who want to try out Angular while it is in alpha. p
| For the sake of this quickstart we recommend using the
a(href="https://github.com/davideast/conscious") <code>es6-shim</code> GitHub repository.
| This repository will provide a faster start.
p p
| For the sake of this quickstart we recommend using the <code>es6-shim</code> GitHub repository for a faster start. The <code>es6-shim</code> repository includes all of the dependencies needed to write ES6 that compiles in the browser. Think of this repository as package rather than a new project. Clone the repository inside of aleady existing project. | Angular is available on npm. However, the es6-shim repository comes with the Angular npm package. This package includes the dependencies needed to write ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
pre p
code git clone https://github.com/davideast/concious.git es6-shim | For the sake of this quickstart we recommend using the <code>es6-shim</code> GitHub repository for a faster start. Angular can be installed through <code>npm</code>. The <code>es6-shim</code> repository comes with the Angular <code>npm</code> package and includes all of the dependencies needed to write ES6 that compiles in the browser. Think of the <code>es6-shim</code> repository as package rather than a new project. Clone the repository inside of aleady existing project.
pre
code git clone https://github.com/davideast/concious.git es6-shim
// STEP 2 - Import Angular ########################## // STEP 2 - Import Angular ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
@ -31,7 +36,9 @@
h3#section-transpile Import Angular h3#section-transpile Import Angular
p p
| Create a new file named <code>app.es6</code>. 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. | Create a new file named <code>app.es6</code> at the root of the project. The <code>.es6</code> extension signifies that the file uses ES6 syntax.
p Using the ES6 module syntax you can import the required modules from Angular2.
pre pre
code code
| import {Component, Template, bootstrap} from 'angular2/angular2'; | import {Component, Template, bootstrap} from 'angular2/angular2';
@ -50,13 +57,15 @@
| Angular allows you to create custom HTML elements through components. Components are used to structure and represent the UI. This quickstart demonstrates the process of creating a <code>Component</code> with the HTML tag of <code>app</code>. | Angular allows you to create custom HTML elements through components. Components are used to structure and represent the UI. This quickstart demonstrates the process of creating a <code>Component</code> with the HTML tag of <code>app</code>.
pre pre
code &lt;hello&gt;&lt;/hello&gt; code &lt;app&gt;&lt;/app&gt;
p A <code>Component</code> is made up of two parts; the annotation section and the component controller. p A <code>Component</code> is made up of two parts; the annotation section and the component controller.
pre pre
code code
| import {Component, Template, bootstrap} from 'angular2/angular2'; | import {Component, Template, bootstrap} from 'angular2/angular2';
| <!-- -->
| // Annotation Section
| @Component({ | @Component({
| selector: 'app' | selector: 'app'
| }) | })
@ -65,24 +74,24 @@
| &lt;h1&gt;Hello {{ name }}&lt;/h1&gt; | &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| ` | `
| }) | })
| // Component Controller
| class AppComponent { | class AppComponent {
| constructor() { | constructor() {
| this.name = "Alice"; | this.name = "Alice";
| } | }
| } | }
| bootstrap(AppComponent);
section.docs-sub-section section.docs-sub-section
h4 Component Annotations h4 Component Annotations
.c6 .c6
p p
| The annotation section is where you can describe meta-data about your | A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its <code>@</code> sign.
code component
| You can always identify an annotation by its
code @
| sign. The <code>Component</code> annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the <code>selector</code> property. The <code>selector</code> property is just a CSS selector.
p p
| The <code>Template</code> annotations tells Angular what template to apply to your 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 template. | The <code>@Component</code> annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the <code>selector</code> property. The <code>selector</code> property is just a CSS selector.
p
| The <code>@Template</code> annotation tells Angular what template to apply to your 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.
pre pre
code code
| @Component({ | @Component({
@ -94,7 +103,7 @@
| ` | `
| }) | })
p p
| The <code>Component</code> created above will have 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>. | The component created above will have 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>.
.clear .clear
section.docs-sub-section section.docs-sub-section
@ -110,9 +119,9 @@
| } | }
| } | }
p p
| Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template. | Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
p p
| In the template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of <code>{{ name }}</code>. | The template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of <code>{{ name }}</code>.
.clear .clear
// STEP 4 - Bootstrap ########################## // STEP 4 - Bootstrap ##########################