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

Steps refactor.

Browse Source
This commit is contained in:
David East 2015-03-03 13:50:44 -08:00
parent 34fa6cd8d7
commit 1eaed5d7a5
1 changed files with 112 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
public/docs/js/latest/quickstart.jade
View File

@ -1,36 +1,54 @@
// STEP 1 - Install Angular ########################## p.
.l-main-section <strong>Angular is still unpackaged and in alpha</strong>. This quickstart does not
h2#section-install-angular 1. Install Angular reflect the final build process for Angular. The following setup is for those who
want to try out Angular while it is in alpha.
// STEP 1 - Create a project ##########################
.l-main-section
h2#section-create-project 1. Create a project
p. p.
<strong>Angular is still unpackaged and in alpha</strong>. This quickstart does not The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
reflect the final build process for Angular. The following setup is for those who To get started, create a new directory.
want to try out Angular while it is in alpha.
pre.prettyprint
code.
mkdir angular2_quickstart
cd angular2_quickstart
// STEP 2 - Add the es6-shim ##########################
.l-main-section
h2#section-add-es6-shim 2. Add the es6-shim
p. Within your project, clone the es6-shim repository:
pre.prettyprint
code git clone https://github.com/davideast/conscious.git es6-shim
p. p.
For the sake of this quickstart we recommend using the For the sake of this quickstart we recommend using the
<a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>. <a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>.
This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers. This repository will provides a faster start than building from <code>npm</code>. The <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
p Clone the repository inside of already existing project.
pre.prettyprint.linenums
code git clone https://github.com/davideast/conscious.git es6-shim
.l-sub-section .l-sub-section
h3 ES6 and es6-shim h3 ES6, AtScript, and the es6-shim
h4 AtScript
p. p.
Angular builds on top of ES6 (ECMAScript 6), Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification
the new specification of the JavaScript language. of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular.
ES6 is not widely supported in all browsers today. The following es6-shim
repository allows you to use ES6 in the browser. h4 ES6
p. p.
The es6-shim package includes Angular and dependencies needed to compile AtScript compiles to <strong>ES6</strong>. ES6 is not widely supported in all browsers today.
ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. The es6-shim repository allows you to use ES6 or AtScript in the browser.
h4 es6-shim
p. p.
Think of the es6-shim repository as package rather than a new project. The <strong>es6-shim</strong> package includes Angular and dependencies needed to compile
ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
Think of the es6-shim repository as package rather than a project.
// STEP 2 - Import Angular ########################## // STEP 2 - Import Angular ##########################
@ -38,13 +56,15 @@
h2#section-transpile 2. Import Angular h2#section-transpile 2. Import Angular
p. p.
This quickstart will consist of two files, an <code>index.html</code> and a Create two files for this quickstart, an <code>index.html</code> and a
<code>app.es6</code>. Both of these files will be at the root of the project. <code>app.es6</code>. Both of these files will be at the root of the project.
The <code>.es6</code> extension signifies that the file uses ES6 syntax. The <code>.es6</code> extension signifies that the file uses ES6 syntax.
pre.prettyprint.linenums
code touch index.html
| touch app.es6
p This quickstart will create a component that renders "Hello Alice" to the page. p Inside of <code>app.es6</code>, use the ES6 module syntax you can import the required modules from Angular.
p Using the ES6 module syntax you can import the required modules from Angular2.
pre.prettyprint.linenums pre.prettyprint.linenums
code import {Component, Template, bootstrap} from 'angular2/angular2'; code import {Component, Template, bootstrap} from 'angular2/angular2';
@ -55,20 +75,19 @@
// STEP 3 - Create a component ########################## // STEP 3 - Create a component ##########################
.l-main-section .l-main-section
h2#section-angular-create-account 3. Create a component h2#section-angular-create-account 3. Define a component
p. p.
Components structure and repre.prettyprint.linenumssent the UI. This quickstart Components structure and represent the UI. This quickstart demonstrates the process of creating a component.
demonstrates the process of creating a component. This component will have the tag of app, The component will have an HTML tag named app,
<code>&lt;my-app&gt;&lt;/my-app&gt;</code>. <strong><code>&lt;my-app&gt;&lt;/my-app&gt;</code></strong>.
p A component consists of two parts; the annotation section and the component controller. p.
A component consists of two parts; the <strong>annotation section</strong>
and the <strong>component controller</strong>.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
// app.es6
import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation Section // Annotation Section
@Component({ @Component({
selector: 'my-app' selector: 'my-app'
@ -83,38 +102,33 @@
} }
} }
// Render the app to the page
bootstrap(MyAppComponent);
.l-sub-section .l-sub-section
h3 Component Annotations h3 Component Annotations
p. p.
A component annotation provides metadata about the <code>component</code>. A component annotation provides metadata about the component.
An annotation can always identified by its at-sign — <code>@</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 <code>@Component</code> The <code>@Component</code> annotation defines the HTML tag for the component.
annotation is imported in the first line of <code>app.es6</code>. The <code>selector</code> property is a CSS selector which specifies 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 The <code>@Template</code> The <code>@Template</code> annotation defines the template to apply to the component.
annotation is imported in the first line of <code>app.es6</code>. This component uses an inline template, but external templates are
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 available as well. To use an external template specify a <code>url</code> property
and give it the path to the html file. and give it the path to the html file.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
@Component({ @Component({
selector: 'app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
}) })
@Template({ @Template({
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
}) })
p. p.
The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code> The component created above has a HTML tag of <code>&lt;my-app&gt;&lt;/my-app&gt;</code>
and a template of <code>&lt;h1&gt;Hello <code>{{</code> name }}&lt;/h1&gt;</code>. and a template of <code>&lt;h1&gt;Hello <code>{{</code> name }}&lt;/h1&gt;</code>.
.l-sub-section .l-sub-section
@ -147,19 +161,17 @@
.l-main-section .l-main-section
h2#section-transpile 4. Bootstrap h2#section-transpile 4. Bootstrap
p The last step to load the component on the page. p The last step to load the component on the page. At the bottom of <code>app.es6</code> call the <code>bootstrap()</code> function.
.l-sub-section pre.prettyprint.linenums
h3 The <code>bootstrap</code> function code bootstrap(MyAppComponent);
p.
Angular provides a <code>bootstrap</code> function that renders a
component to the page. The <code>bootstrap</code> function takes a p.
component as a parameter. Any child components inside of the parent Angular provides a <code>bootstrap</code> function that renders a
component will render as well. component to the page. The <code>bootstrap</code> function takes a
component as a parameter. Any child components inside of the parent
pre.prettyprint.linenums component will render as well.
code bootstrap(MyAppComponent);
// STEP 5 - Declare the HTML ########################## // STEP 5 - Declare the HTML ##########################
@ -187,53 +199,55 @@
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
// STEP 6 - Declare the HTML ##########################
.l-main-section
h2#section-load-component-module 5. Load the component
p.
The last step is to load the module for the my-app component.
The es6-shim file comes packaged with the System library. We'll
use System to load the component we created above.
.l-sub-section .l-sub-section
h3 Load the component module h3 System.js
p. p.
The last step is to load the module for the my-app component. System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System
The es6-shim file comes packaged with the System library. provides module loading functionality to these browsers.
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
p. load the files from. The paths property in System specifies
To load the needed modules, System needs to know where to the location of the files.
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 my-app component created above: The component to display on the page.
p Tell System about three paths:
ol
li Angular: The Angular framework.
li Runtime assertions: Optional assertions for runtime type checking.
li The my-app component created above: The component to display on the page.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
&lt;!-- index.html --&gt; &lt;my-app&gt;&lt;/my-app&gt;
&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 my-app component created in app.es6 --&gt; &lt;script&gt;
&lt;my-app&gt;&lt;/my-app&gt; // Rewrite the paths to load the files
System.paths = {
'angular2/*':'/es6-shim/angular2/*.js', // Angular
'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions
'app': 'app.es6' // The my-app component
};
&lt;script&gt; // Kick off the application
// Rewrite the paths to load the files System.import('app');
System.paths = { &lt;/script&gt;
'angular2/*':'/es6-shim/angular2/*.js', // Angular
'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions // STEP 6 - Declare the HTML ##########################
'app': 'app.es6' // The my-app component .l-main-section
};
// Kick off the application h2#section-load-component-module 5. Run a local server
System.import('app');
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
p Run the root of your project on a local server.
// WHAT'S NEXT... ########################## // WHAT'S NEXT... ##########################