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

Quickstart - Module loading

Browse Source
This commit is contained in:
David East 2015-02-28 05:53:01 -08:00
parent c1aa128527
commit 9fdb7b3dbb
1 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
public/docs/_quickstart.jade
View File

@ -45,10 +45,6 @@
.c11 .c11
header header
// Angular is a component based framework.
// Components are custom HTML elements.
// Components are used to structure and represent the UI.
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>.
@ -119,6 +115,7 @@
| 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 ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number4.large i.number.icon-number4.large
@ -139,15 +136,63 @@
pre bootstrap(App); pre bootstrap(App);
.clear .clear
// STEP 5 - Declare the HTML ##########################
.content-block.content-number.clearfix
i.number.icon-number5.large
.c11
header
h3#section-angular-create-account Declare the HTML
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.
code
pre
| &lt;html&gt;
| &lt;head&gt;
| &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
| &lt;/head&gt;
| &lt;body&gt;
| <!-- -->
| &lt;!-- The app component created in app.es6 --&gt;
| &lt;app&gt;&lt;/app&gt;
| <!-- -->
| &lt;/body&gt;
| &lt;/html&gt;
section.docs-sub-section section.docs-sub-section
h4 Declare the HTML h4 Load the component module
.c6 .c6
p p
| Create a <code>index.html</code> file. | 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.
p
|
code code
pre &lt;app&gt;&lt;/app&gt; pre
.clear | &lt;html&gt;
| &lt;head&gt;
| &lt;title&gt;Angular 2 Quickstart&lt;/title&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'
| };
| <!-- -->
| System.import('app');
| &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