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-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
h4 Component Annotations
.c6
p
| A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
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.
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.
pre
code
| @Component({
| selector: 'app'
| })
| @Template({
| inline: `
| &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| `
| })
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>.
p
| A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
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.
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.
pre
code
| @Component({
| selector: 'app'
| })
| @Template({
| inline: `
| &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| `
| })
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>.
.clear
section.docs-sub-section
h4 Component Controller
.c6
p
| The component controller is the backing of the component's template. A component controller uses ES6 <code>class</code> syntax.
pre
code
| class AppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
p
| Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
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>.
p
| The component controller is the backing of the component's template. A component controller uses ES6 <code>class</code> syntax.
pre
code
| class AppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
p
| Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
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>.
.clear
// STEP 4 - Bootstrap ##########################
@ -135,13 +134,12 @@
section.docs-sub-section
h4 The <code>bootstrap</code> function
.c6
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.
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.
code
pre bootstrap(AppComponent);
.clear
code
pre bootstrap(AppComponent);
.clear
// STEP 5 - Declare the HTML ##########################
.content-block.content-number.clearfix
@ -170,48 +168,47 @@
section.docs-sub-section
h4 Load the component module
.c6
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.
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.
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.
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.
p Tell System about three paths:
ol
li Angular - The Angular framework.
li Runtime assertions - Optional assertions for runtime type checking.
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 Tell System about three paths:
ol
li Angular - The Angular framework.
li Runtime assertions - Optional assertions for runtime type checking.
li The app component created above - The component to display on the page.
p
| Run the root of your project on a local server.
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
| Run the root of your project on a local server.
.content-block.content-number.clearfix
i.number.icon-number6.large