p.
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.
// STEP 1 - Create a project ##########################
.l-main-section
h2#section-create-project 1. Create a project
p.
The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
To get started, create a new directory.
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.
For the sake of this quickstart we recommend using the
es6-shim GitHub repository.
This repository provides a faster start than building from npm. The es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers.
.l-sub-section
h3 ES6, AtScript, and the es6-shim
h4 AtScript
p.
Angular is built with AtScript. AtScript is an extension of ES6 (ECMAScript 6), the new specification
of the JavaScript language. This quickstart features AtScript, but Angular
doesn't require you to write AtScript.
h4 ES6
p.
AtScript compiles to ES6, which is not widely supported in all browsers today.
The es6-shim repository allows you to use ES6 or AtScript in the browser.
h4 es6-shim
p.
The es6-shim package includes Angular and dependencies
(such as Traceur) needed to compile
ES6 in the browser. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
Think of the es6-shim repository as a package rather than a project.
// PENDING: "Think of ... as a package" could be clearer.
// STEP 3 - Import Angular ##########################
.l-main-section
h2#section-transpile 3. Import Angular
p.
Create two files, index.html and
app.es6, both at the root of the project:
pre.prettyprint
code.
touch index.html
touch app.es6
.alert.is-helpful The .es6 extension signifies that the file uses ES6 syntax.
p Inside of app.es6, import the required modules from Angular:
pre.prettyprint.linenums
code import {Component, Template, bootstrap} from 'angular2/angular2';
p.
The above import statement uses ES6 module syntax to import three modules from Angular.
These modules load at runtime.
// STEP 4 - Create a component ##########################
.l-main-section
h2#section-angular-create-account 4. Define a component
p.
Components structure and represent the UI. This quickstart demonstrates the process of creating a component
that has an HTML tag named <my-app>.
p.
A component consists of two parts, the annotation section
and the component controller.
pre.prettyprint.linenums
code.
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
constructor() {
this.name = 'Alice';
}
}
.l-sub-section
h3 Component annotations
p.
A component annotation provides metadata about the component.
An annotation can be identified by its at-sign (@).
p.
The @Component annotation defines
the HTML tag for the component by specifying the component's CSS selector.
p.
The @Template annotation defines the HTML that
represents the component. This component uses an inline template,
but you can also have an external template. To use an external template,
specify a url property
and give it the path to the HTML file.
pre.prettyprint.linenums
code.
@Component({
selector: 'my-app' // Defines the <my-app></my-app> tag
})
@Template({
inline: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
})
p.
The annotations above specify an HTML tag of <my-app>
and a template of <h1>Hello {{ name }}</h1>.
.l-sub-section
h3 The template and the component controller
p.
The component controller is the backing of the component's template. A component
controller uses ES6 class syntax.
pre.prettyprint.linenums
code.
class MyAppComponent {
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 name property through
the double-mustache syntax ({{ ... }}).
The body of the constructor assigns "Alice" to the name property. When the
template renders, "Hello Alice" appears instead of
"Hello {{ name }}".
// STEP 5 - Bootstrap ##########################
.l-main-section
h2#section-transpile 5. Bootstrap
p.
At the bottom of app.es6, call the bootstrap() function
to load your new component into its page:
pre.prettyprint.linenums
code bootstrap(MyAppComponent);
p.
The bootstrap() function takes a
component as a parameter, enabling the component
(as well as any child components it contains) to render.
// STEP 6 - Declare the HTML ##########################
.l-main-section
h2#section-angular-create-account 6. Declare the HTML
p.
Inside the head tag of index.html, include the es6-shim.js file.
(The es6-shim code must load before any application code.)
Then instantiate the my-app component in the body.
pre.prettyprint.linenums
code.
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="/es6-shim/dist/es6-shim.js"></script>
</head>
<body>
<!-- The app component created in app.es6 -->
<my-app></my-app>
</body>
</html>
// STEP 7 - Declare the HTML ##########################
.l-main-section
h2#section-load-component-module 7. Load the component
p.
The last step is to load the module for the my-app component.
To do this, we'll use the System library,
which is included in es6-shim.
.l-sub-section
h3 System.js
p.
System is a third-party open-source library that
adds ES6 module loading functionality to browsers.
p.
Add the following module-loading code to index.html:
pre.prettyprint.linenums
code.
<my-app></my-app>
<script>
// 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
};
// Kick off the application
System.import('app');
</script>
p.
The System.paths property above specifies
the paths to the following modules:
ul
li The Angular framework
li Optional assertions for runtime type checking
li The component to display on the page
// STEP 8 - Run a local server ##########################
.l-main-section
h2#section-load-component-module 8. Run a local server
// PENDING: add directions (or at least hints) here
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great job! Next step...
p Learn some template syntax for extra credit.