244 lines
7.8 KiB
Plaintext
244 lines
7.8 KiB
Plaintext
// 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.
|
|
|
|
p Clone the repository inside of aleady existing project.
|
|
|
|
pre.prettyprint.linenums
|
|
code git clone https://github.com/davideast/concious.git es6-shim
|
|
|
|
.l-sub-section
|
|
h3 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 ##########################
|
|
.l-main-section
|
|
h2#section-transpile 2. 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.
|
|
Using the ES6 module syntax you can import the required modules from Angular2.
|
|
|
|
pre.prettyprint.linenums
|
|
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 ##########################
|
|
.l-main-section
|
|
|
|
h2#section-angular-create-account 3. 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.prettyprint.linenums
|
|
code <app></app>
|
|
|
|
p A component consists of two parts; the annotation section and the component controller.
|
|
|
|
pre.prettyprint.linenums
|
|
code.
|
|
import {Component, Template, bootstrap} from 'angular2/angular2';
|
|
|
|
// Annotation Section
|
|
@Component({
|
|
selector: 'app'
|
|
})
|
|
@Template({
|
|
inline: `
|
|
<h1>Hello {{ name }}</h1>
|
|
`
|
|
})
|
|
// Component Controller
|
|
class AppComponent {
|
|
constructor() {
|
|
this.name = "Alice";
|
|
}
|
|
}
|
|
|
|
.l-sub-section
|
|
h3 Component Annotations
|
|
|
|
p.
|
|
A component annotation provides metadata 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.prettyprint.linenums
|
|
code.
|
|
@Component({
|
|
selector: 'app'
|
|
})
|
|
@Template({
|
|
inline: `
|
|
<h1>Hello {{ name }}</h1>
|
|
`
|
|
})
|
|
|
|
p.
|
|
The component created above has a HTML tag of <code><app></app></code>
|
|
and a template of <code><h1>Hello {{ name }}</h1></code>.
|
|
|
|
.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
|
|
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>.
|
|
|
|
|
|
|
|
// 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
|
|
code bootstrap(AppComponent);
|
|
|
|
|
|
|
|
// STEP 5 - Declare the HTML ##########################
|
|
.l-main-section
|
|
|
|
h2#section-angular-create-account 5. 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.
|
|
|
|
pre.prettyprint.linenums
|
|
code.
|
|
<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 -->
|
|
<app></app>
|
|
<!-- -->
|
|
</body>
|
|
</html>
|
|
|
|
.l-sub-section
|
|
h3 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.
|
|
|
|
pre.prettyprint.linenums
|
|
code.
|
|
<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 -->
|
|
<app></app>
|
|
|
|
<script>
|
|
// 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');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
p Run the root of your project on a local server.
|
|
|
|
|
|
|
|
// WHAT'S NEXT... ##########################
|
|
.l-main-section
|
|
h2#section-transpile Great Job! Next Step...
|
|
|
|
p Learn some template syntax for extra-credit.
|