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

Merge pull request #24 from davideast/de-quickstart 

Quickstart.
This commit is contained in:
David East 2015-03-01 06:27:42 -08:00
parent 237e331aef 70f7e94d6f
commit 97e1a578b9
2 changed files with 233 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/index.jade
View File

@ -1 +1 @@
h1 path #{current.path[0]}
h1 path #{current.path[0]}

232
public/docs/js/_quickstart.jade Normal file
View File

@ -0,0 +1,232 @@
//- if lang == 'js'
//- h2 I like JavaScript
//- else if lang == 'dart'
//- h2 I like Dart
// STEP 1 - Install Angular ##########################
.content-block.content-number.clearfix
i.number.icon-number.large
.c11
header
h3#section-install-angular Install Angular
p
b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular.
| The following setup is for those who want to try out Angular while it is in alpha.
p
| For the sake of this quickstart we recommend using the
a(href="https://github.com/davideast/conscious") <code>es6-shim</code> GitHub repository
|. This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
p
| Clone the repository inside of aleady existing project.
pre
code git clone https://github.com/davideast/concious.git es6-shim
section.docs-sub-section
h4 A word on ES6
p
| Angular builds on top of ES6, the new specification of the JavaScript language. Not all ES6 features are available in all browsers. The following es6-shim repository allows you to use ES6 in the browser today.
p
| Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here.
p
| The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
// STEP 2 - Import Angular ##########################
.content-block.content-number.clearfix
i.number.icon-number2.large
.c11
header
h3#section-transpile Import Angular
p
| Create a file named <code>app.es6</code> at the root of the project. The <code>.es6</code> extension signifies that the file uses ES6 syntax.
p Using the ES6 module syntax you can import the required modules from Angular2.
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
p
| The above import statement will import the three modules from Angular. These modules load at runtime.
// STEP 3 - Create a component ##########################
.content-block.content-number.clearfix
i.number.icon-number3.large
.c11
header
h3#section-angular-create-account Create a component
p
| Components are custom HTML elements. Angular uses components to empower HTML. Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.
pre
code &lt;app&gt;&lt;/app&gt;
p A component consists of two parts; the annotation section and the component controller.
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
| <!-- -->
| // Annotation Section
| @Component({
| selector: 'app'
| })
| @Template({
| inline: `
| &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| `
| })
| // Component Controller
| class AppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
section.docs-sub-section
h4 Component Annotations
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
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 ##########################
.content-block.content-number.clearfix
i.number.icon-number4.large
.c11
header
h3#section-transpile Bootstrap
p
| The last step to load the component on the page.
section.docs-sub-section
h4 The <code>bootstrap</code> function
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
// 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 an <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. Now, declare the app component the <code>body</code>. The es6-shim must load before any application code.
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;/body&gt;
| &lt;/html&gt;
section.docs-sub-section
h4 Load the component module
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 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
| Run the root of your project on a local server.
.content-block.content-number.clearfix
i.number.icon-number6.large
.c11
header
h3#section-transpile Extra-credit
p
| Learn some template syntax for extra-credit.