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

JS Quickstart.

This commit is contained in:
David East 2015-02-28 05:37:48 -08:00
parent 906f631f92
commit c1aa128527
1 changed files with 51 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
public/docs/_quickstart.jade
View File

@ -4,6 +4,7 @@
//- else if lang == 'dart' //- else if lang == 'dart'
//- h2 I like Dart //- h2 I like Dart
// STEP 1 - Install Angular ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number.large i.number.icon-number.large
@ -12,43 +13,51 @@
h3#section-install-angular Install Angular h3#section-install-angular Install Angular
p p
| Install Angular from npm. | 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.
| 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 <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.
pre
code git clone https://github.com/davideast/concious.git es6-shim
// STEP 2 - Import Angular ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number2.large i.number.icon-number2.large
.c11 .c11
header header
h3#section-transpile Transpile ES6 to ES5 h3#section-transpile Import Angular
p p
| Angular is written in ES6 which needs to be transpiled to ES5 before reaching the browser. | 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.
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
p
| The above import statement will import the three basic pieces needed to create an Angular app. The import statement loads the modules dynamically at runtime.
// STEP 3 - Create a component ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number3.large i.number.icon-number3.large
.c11 .c11
header header
h3#section-transpile Import Angular // Angular is a component based framework.
p // Components are custom HTML elements.
| Using the ES6 module syntax you can import Angular2. // Components are used to structure and represent the UI.
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
p
| The above import statement will import the three basic pieces needed to create an Angular app.
.content-block.content-number.clearfix
i.number.icon-number4.large
.c11
header
h3#section-angular-create-account Create a component h3#section-angular-create-account Create a component
p p
| Angular is a component based framework. Components are used to structure and represent the UI. A <code>Component</code> is made up of two parts; the annotation section and the component controller. | 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
code &lt;hello&gt;&lt;/hello&gt;
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';
@ -75,7 +84,9 @@
code component code component
| You can always identify an annotation by its | You can always identify an annotation by its
code @ code @
| sign. The <code>Component</code> annotation tells Angular what the HTML tag will be for your component. Whereas the <code>Template</code> annotations tells Angular what template to apply to your component. | 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
| 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.
pre pre
code code
| @Component({ | @Component({
@ -83,11 +94,11 @@
| }) | })
| @Template({ | @Template({
| inline: ` | inline: `
| &lt;h1&gt;Hello&lt;/h1&gt; | &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| ` | `
| }) | })
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&lt;/h1&gt;</code>. | 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>.
.clear .clear
section.docs-sub-section section.docs-sub-section
@ -102,28 +113,41 @@
| this.name = "Alice"; | this.name = "Alice";
| } | }
| } | }
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>.
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 directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template.
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>.
.clear .clear
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number5.large i.number.icon-number4.large
.c11 .c11
header header
h3#section-transpile Bootstrap h3#section-transpile Bootstrap
p p
| The last step to get your component to load on the page. | The last step to get the component to load on the page.
section.docs-sub-section section.docs-sub-section
h4 The <code>bootstrap</code> function h4 The <code>bootstrap</code> function
.c6 .c6
p p
| Angular provides a <code>bootstrap</code> function that renders your component to the page. | Angular provides a <code>bootstrap</code> function that renders your component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will be rendered as well.
code
pre bootstrap(App);
.clear .clear
section.docs-sub-section
h4 Declare the HTML
.c6
p
| Create a <code>index.html</code> file.
code
pre &lt;app&gt;&lt;/app&gt;
.clear
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number6.large i.number.icon-number6.large