angular-cn/public/docs/js/latest/quickstart.jade

244 lines
8.2 KiB
Plaintext
Raw Normal View History

2015-03-02 09:01:47 -05:00
// STEP 1 - Install Angular ##########################
.l-main-section
h2#section-install-angular 1. Install Angular
p.
<strong>Angular is still unpackaged and in alpha</strong>. 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</a>.
This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
2015-03-03 14:32:06 -05:00
p Clone the repository inside of already existing project.
2015-03-02 09:01:47 -05:00
pre.prettyprint.linenums
2015-03-03 14:32:06 -05:00
code git clone https://github.com/davideast/conscious.git es6-shim
2015-03-02 09:01:47 -05:00
.l-sub-section
2015-03-03 14:32:06 -05:00
h3 ES6 and es6-shim
2015-03-02 09:01:47 -05:00
p.
2015-03-03 14:32:06 -05:00
Angular builds on top of ES6 (ECMAScript 6),
the new specification of the JavaScript language.
2015-03-02 20:05:31 -05:00
ES6 is not widely supported in all browsers today. The following es6-shim
repository allows you to use ES6 in the browser.
2015-03-02 09:01:47 -05:00
p.
The es6-shim package includes Angular and dependencies needed to compile
2015-03-02 22:16:09 -05:00
ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
2015-03-02 09:01:47 -05:00
p.
2015-03-02 20:05:31 -05:00
Think of the es6-shim repository as package rather than a new project.
2015-03-02 09:01:47 -05:00
// STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
p.
2015-03-02 19:53:46 -05:00
This quickstart will consist of two files, an <code>index.html</code> and a
<code>app.es6</code>. Both of these files will be at the root of the project.
2015-03-02 09:01:47 -05:00
The <code>.es6</code> extension signifies that the file uses ES6 syntax.
2015-03-02 22:16:09 -05:00
2015-03-02 20:05:31 -05:00
p This quickstart will create a component that renders "Hello Alice" to the page.
2015-03-02 22:16:09 -05:00
2015-03-02 20:05:31 -05:00
p Using the ES6 module syntax you can import the required modules from Angular2.
2015-03-02 09:01:47 -05:00
pre.prettyprint.linenums
code import {Component, Template, bootstrap} from 'angular2/angular2';
2015-03-02 19:53:46 -05:00
p The above import statement will import three modules from Angular. These modules load at runtime.
2015-03-02 09:01:47 -05:00
// STEP 3 - Create a component ##########################
.l-main-section
h2#section-angular-create-account 3. Create a component
p.
Components structure and repre.prettyprint.linenumssent the UI. This quickstart
2015-03-02 19:53:46 -05:00
demonstrates the process of creating a component. This component will have the tag of app,
<code>&lt;my-app&gt;&lt;/my-app&gt;</code>.
2015-03-02 09:01:47 -05:00
p A component consists of two parts; the annotation section and the component controller.
pre.prettyprint.linenums
code.
2015-03-02 19:53:46 -05:00
// app.es6
2015-03-02 09:01:47 -05:00
import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation Section
@Component({
2015-03-02 22:16:09 -05:00
selector: 'my-app'
2015-03-02 09:01:47 -05:00
})
@Template({
2015-03-03 14:32:06 -05:00
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
2015-03-02 09:01:47 -05:00
})
// Component Controller
2015-03-02 19:53:46 -05:00
class MyAppComponent {
2015-03-02 09:01:47 -05:00
constructor() {
2015-03-03 14:32:06 -05:00
this.name = 'Alice';
2015-03-02 09:01:47 -05:00
}
}
2015-03-02 19:53:46 -05:00
// Render the app to the page
bootstrap(MyAppComponent);
2015-03-02 09:01:47 -05:00
.l-sub-section
h3 Component Annotations
p.
2015-03-02 21:43:37 -05:00
A component annotation provides metadata about the <code>component</code>.
2015-03-02 09:01:47 -05:00
An annotation can always identified by its at-sign — <code>@</code>.
p.
2015-03-02 19:53:46 -05:00
The <code>@Component</code> annotation defines the HTML tag for the component. The <code>@Component</code>
annotation is imported in the first line of <code>app.es6</code>.
2015-03-02 09:01:47 -05:00
The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p.
2015-03-02 19:53:46 -05:00
The <code>@Template</code> annotation defines the template to apply to the The <code>@Template</code>
annotation is imported in the first line of <code>app.es6</code>.
2015-03-02 09:01:47 -05:00
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.prettyprint.linenums
code.
@Component({
2015-03-02 19:53:46 -05:00
selector: 'app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
2015-03-02 09:01:47 -05:00
})
@Template({
2015-03-03 14:32:06 -05:00
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
2015-03-02 09:01:47 -05:00
})
p.
The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code>
2015-03-02 19:53:46 -05:00
and a template of <code>&lt;h1&gt;Hello <code>{{</code> name }}&lt;/h1&gt;</code>.
2015-03-02 09:01:47 -05:00
.l-sub-section
h3 Component Controller
p.
The component controller is the backing of the component's template. A component
controller uses ES6 <code>class</code> syntax.
pre.prettyprint.linenums
2015-03-02 22:16:09 -05:00
code.
class MyAppComponent {
2015-03-02 09:01:47 -05:00
constructor() {
2015-03-03 14:32:06 -05:00
this.name = 'Alice';
2015-03-02 09:01:47 -05:00
}
}
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>.
// STEP 4 - Bootstrap ##########################
.l-main-section
h2#section-transpile 4. Bootstrap
p The last step to load the component on the page.
.l-sub-section
h3 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.
pre.prettyprint.linenums
2015-03-02 19:53:46 -05:00
code bootstrap(MyAppComponent);
2015-03-02 09:01:47 -05:00
// STEP 5 - Declare the HTML ##########################
.l-main-section
h2#section-angular-create-account 5. Declare the HTML
p.
2015-03-02 20:05:31 -05:00
Inside of the <code>index.html</code>, 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.
2015-03-02 09:01:47 -05:00
pre.prettyprint.linenums
code.
2015-03-02 19:53:46 -05:00
&lt;!-- index.html --&gt;
2015-03-02 09:01:47 -05:00
&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;
2015-03-02 22:16:09 -05:00
2015-03-02 09:01:47 -05:00
&lt;!-- The app component created in app.es6 --&gt;
2015-03-02 19:53:46 -05:00
&lt;my-app&gt;&lt;/my-app&gt;
2015-03-02 22:16:09 -05:00
2015-03-02 09:01:47 -05:00
&lt;/body&gt;
&lt;/html&gt;
.l-sub-section
h3 Load the component module
p.
2015-03-02 19:53:46 -05:00
The last step is to load the module for the my-app component.
2015-03-02 09:01:47 -05:00
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
2015-03-03 14:32:06 -05:00
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.
2015-03-02 09:01:47 -05:00
pre.prettyprint.linenums
code.
2015-03-02 19:53:46 -05:00
&lt;!-- index.html --&gt;
2015-03-02 09:01:47 -05:00
&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;
2015-03-02 19:53:46 -05:00
&lt;!-- The my-app component created in app.es6 --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
2015-03-02 09:01:47 -05:00
&lt;script&gt;
// Rewrite the paths to load the files
System.paths = {
2015-03-02 19:53:46 -05:00
'angular2/*':'/es6-shim/angular2/*.js', // Angular
'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions
'app': 'app.es6' // The my-app component
2015-03-02 09:01:47 -05:00
};
// Kick off the application
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... ##########################
.l-main-section
2015-03-03 14:32:06 -05:00
h2#section-transpile Great job! Next step...
2015-03-02 09:01:47 -05:00
2015-03-03 14:32:06 -05:00
p Learn some template syntax for extra credit.