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

Formatting.

This commit is contained in:
David East 2015-02-28 06:07:33 -08:00
parent 9fdb7b3dbb
commit 68ebf708fe
1 changed files with 145 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
public/docs/_quickstart.jade
View File

@ -30,13 +30,13 @@
header header
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>. 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 pre
code code
| import {Component, Template, bootstrap} from 'angular2/angular2'; | import {Component, Template, bootstrap} from 'angular2/angular2';
p 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. | 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 ########################## // STEP 3 - Create a component ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
@ -46,74 +46,74 @@
header header
h3#section-angular-create-account Create a component h3#section-angular-create-account Create a component
p p
| 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;hello&gt;&lt;/hello&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';
| @Component({ | @Component({
| selector: 'app' | selector: 'app'
| }) | })
| @Template({ | @Template({
| inline: ` | inline: `
| &lt;h1&gt;Hello {{ name }}&lt;/h1&gt; | &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| ` | `
| }) | })
| class AppComponent { | class AppComponent {
| constructor() { | constructor() {
| this.name = "Alice"; | this.name = "Alice";
| } | }
| } | }
| bootstrap(App); | bootstrap(App);
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 | The annotation section is where you can describe meta-data about your
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. The tag is specified by using the <code>selector</code> property. The <code>selector</code> property is just a CSS selector. | 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>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({
| selector: 'app' | selector: 'app'
| }) | })
| @Template({ | @Template({
| inline: ` | inline: `
| &lt;h1&gt;Hello {{ name }}&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 {{ name }}&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
h4 Component Controller h4 Component Controller
.c6 .c6
p p
| The component controller is defined using the ES6 <code>class</code> syntax. This <code>class</code> is the backing of the component's template. | The component controller is defined using the ES6 <code>class</code> syntax. This <code>class</code> is the backing of the component's template.
pre pre
code code
| class AppComponent { | class AppComponent {
| constructor() { | constructor() {
| this.name = "Alice"; | this.name = "Alice";
| } | }
| } | }
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 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>. | 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
// STEP 4 - Bootstrap ########################## // STEP 4 - Bootstrap ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
@ -123,76 +123,79 @@
header header
h3#section-transpile Bootstrap h3#section-transpile Bootstrap
p p
| The last step to get the 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. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will be rendered as well. | 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 code
pre bootstrap(App); pre bootstrap(App);
.clear .clear
// STEP 5 - Declare the HTML ########################## // STEP 5 - Declare the HTML ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number5.large i.number.icon-number5.large
.c11 .c11
header header
h3#section-angular-create-account Declare the HTML h3#section-angular-create-account Declare the HTML
p p
| Create a <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. Once the shim is included the <code>app</code> component can be declared in the HTML. | Create a <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. Once the shim is included the <code>app</code> component can be declared in the HTML.
code code
pre pre
| &lt;html&gt; | &lt;html&gt;
| &lt;head&gt; | &lt;head&gt;
| &lt;title&gt;Angular 2 Quickstart&lt;/title&gt; | &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
| &lt;/head&gt; | &lt;/head&gt;
| &lt;body&gt; | &lt;body&gt;
| <!-- --> | <!-- -->
| &lt;!-- The app component created in app.es6 --&gt; | &lt;!-- The app component created in app.es6 --&gt;
| &lt;app&gt;&lt;/app&gt; | &lt;app&gt;&lt;/app&gt;
| <!-- --> | <!-- -->
| &lt;/body&gt; | &lt;/body&gt;
| &lt;/html&gt; | &lt;/html&gt;
section.docs-sub-section section.docs-sub-section
h4 Load the component module h4 Load the component module
.c6 .c6
p p
| The last step is to load the module for the <code>app</code> component. The <code>es6-shim</code> file comes packaged with the <code>System</code> library, which is the current polyfill for ES6 module loading. <code>System</code> will allow you to load modules in browsers that do not support ES6 module loading. | The last step is to load the module for the <code>app</code> component. The <code>es6-shim</code> file comes packaged with the <code>System</code> library. <code>System</code> will allow you to load modules in browsers that do not support ES6 module loading.
p p
| | To load the needed modules, <code>System</code> needs to know where to dynamically load the files. The <code>paths</code> property in <code>System</code> allows you to specify where the location of the files.
code p
pre | Using <code>System.paths</code> specify paths for Angular, runtime assertions, and the <code>app</code> component created above.
| &lt;html&gt;
| &lt;head&gt; code
| &lt;title&gt;Angular 2 Quickstart&lt;/title&gt; pre
| &lt;/head&gt; | &lt;html&gt;
| &lt;body&gt; | &lt;head&gt;
| <!-- --> | &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
| &lt;!-- The app component created in app.es6 --&gt; | &lt;/head&gt;
| &lt;app&gt;&lt;/app&gt; | &lt;body&gt;
| <!-- --> | <!-- -->
| &lt;script&gt; | &lt;!-- The app component created in app.es6 --&gt;
| // Rewrite the paths to load the files | &lt;app&gt;&lt;/app&gt;
| System.paths = { | <!-- -->
| 'angular2/*':'/es6-shim/angular2/*.js', | &lt;script&gt;
| 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', | // Rewrite the paths to load the files
| 'app': 'app.es6' | System.paths = {
| }; | 'angular2/*':'/es6-shim/angular2/*.js',
| <!-- --> | 'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
| System.import('app'); | 'app': 'app.es6'
| &lt;/script&gt; | };
| &lt;/body&gt; | <!-- -->
| &lt;/html&gt; | System.import('app');
.clear | &lt;/script&gt;
| &lt;/body&gt;
| &lt;/html&gt;
.clear
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number6.large i.number.icon-number6.large
@ -201,5 +204,5 @@
header header
h3#section-transpile Extra-credit h3#section-transpile Extra-credit
p p
| Learn some template syntax for extra-credit. | Learn some template syntax for extra-credit.