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

Formatting.

Browse Source
This commit is contained in:
David East 2015-03-01 06:07:46 -08:00
parent 22d6b1bedd
commit a86243dbaf
1 changed files with 75 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
public/docs/js/_quickstart.jade
View File

@ -83,43 +83,42 @@
section.docs-sub-section section.docs-sub-section
h4 Component Annotations h4 Component Annotations
.c6
p p
| A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>. | A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
p p
| The <code>@Component</code> annotation defines the HTML tag for the component. The selector property specifies the tag. The <code>selector</code> property is a CSS selector. | The <code>@Component</code> annotation defines the HTML tag for the component. The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p p
| The <code>@Template</code> annotation defines the template to apply to the 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. | The <code>@Template</code> annotation defines the template to apply to the 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({
| 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 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>. | 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>.
.clear .clear
section.docs-sub-section section.docs-sub-section
h4 Component Controller h4 Component Controller
.c6 p
p | The component controller is the backing of the component's template. A component controller uses ES6 <code>class</code> syntax.
| The component controller is the backing of the component's template. A component controller uses ES6 <code>class</code> syntax. pre
pre code
code | class AppComponent {
| class AppComponent { | constructor() {
| constructor() { | this.name = "Alice";
| this.name = "Alice"; | }
| } | }
| } p
p | Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
| Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller. p
p | The template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of <code>{{ name }}</code>.
| The template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of <code>{{ name }}</code>.
.clear .clear
// STEP 4 - Bootstrap ########################## // STEP 4 - Bootstrap ##########################
@ -135,13 +134,12 @@
section.docs-sub-section section.docs-sub-section
h4 The <code>bootstrap</code> function h4 The <code>bootstrap</code> function
.c6 p
p | Angular provides a <code>bootstrap</code> function that renders a component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will render as well.
| Angular provides a <code>bootstrap</code> function that renders a component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will render as well.
code code
pre bootstrap(AppComponent); pre bootstrap(AppComponent);
.clear .clear
// STEP 5 - Declare the HTML ########################## // STEP 5 - Declare the HTML ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
@ -170,48 +168,47 @@
section.docs-sub-section section.docs-sub-section
h4 Load the component module h4 Load the component module
.c6 p
p | The last step is to load the module for the 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.
| The last step is to load the module for the 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.
p p
| 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. | 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.
p Tell System about three paths: p Tell System about three paths:
ol ol
li Angular - The Angular framework. li Angular - The Angular framework.
li Runtime assertions - Optional assertions for runtime type checking. li Runtime assertions - Optional assertions for runtime type checking.
li The app component created above - The component to display on the page. li The app component created above - The component to display on the page.
code
pre
| &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;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'
| };
| <!-- -->
| // Kick off the application
| System.import('app');
| &lt;/script&gt;
| &lt;/body&gt;
| &lt;/html&gt;
.clear
p code
| Run the root of your project on a local server. pre
| &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;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'
| };
| <!-- -->
| // Kick off the application
| System.import('app');
| &lt;/script&gt;
| &lt;/body&gt;
| &lt;/html&gt;
.clear
p
| Run the root of your project on a local server.
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number6.large i.number.icon-number6.large