quick start updated
This commit is contained in:
parent
b707aed54b
commit
8c65545cc8
|
@ -25,14 +25,14 @@
|
|||
TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
|
||||
To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
|
||||
|
||||
pre.prettyprint
|
||||
code-example.
|
||||
$ npm install -g tsd
|
||||
$ tsd query angular2 --action install
|
||||
|
||||
p.
|
||||
Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
|
||||
|
||||
pre.prettyprint
|
||||
code-example.
|
||||
$ touch app.ts index.html
|
||||
|
||||
// STEP 2 - Start the TypeScript compiler ##########################
|
||||
|
@ -45,7 +45,7 @@
|
|||
compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
|
||||
are loaded, or configure your editor or IDE to do it.
|
||||
|
||||
pre.prettyprint
|
||||
code-example.
|
||||
$ npm install -g typescript@^1.5.0-beta
|
||||
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
|
||||
|
||||
|
@ -54,12 +54,12 @@
|
|||
h2#section-transpile 3. Import Angular
|
||||
|
||||
p Inside of <code>app.ts</code>, import the type definitions from Angular:
|
||||
pre.prettyprint
|
||||
code /// <reference path="typings/angular2/angular2.d.ts" />
|
||||
code-example.
|
||||
<reference path="typings/angular2/angular2.d.ts" >
|
||||
|
||||
p Now your editor should be able to complete the available imports:
|
||||
pre.prettyprint
|
||||
code import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
code-example.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
p.
|
||||
The above import statement uses ES6 module syntax to import three symbols from the Angular module.
|
||||
|
@ -80,23 +80,22 @@
|
|||
which is an ES6 class, and the <strong>decorators</strong> which tell Angular
|
||||
how to place the component into the page.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
// Annotation section
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>'
|
||||
})
|
||||
// Component controller
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
code-example(language="javascript" format="linenums").
|
||||
// Annotation section
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>'
|
||||
})
|
||||
// Component controller
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
.l-sub-section
|
||||
h3 @Component and @View annotations
|
||||
|
@ -108,14 +107,13 @@
|
|||
p.
|
||||
The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> 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
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
|
||||
})
|
||||
code-example(language="javascript" format="linenums").
|
||||
@Component({
|
||||
selector: 'my-app' // Defines the <my-app></my-app> tag
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
|
||||
})
|
||||
|
||||
p.
|
||||
The annotations above specify an HTML tag of <code><my-app></code>
|
||||
|
@ -128,14 +126,13 @@
|
|||
The component controller is the backing of the component's template. This component
|
||||
controller uses TypeScript <code>class</code> syntax.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
code-example(language="javascript" format="linenums").
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
p.
|
||||
Templates read from their component controllers. Templates have access to any properties
|
||||
|
@ -158,8 +155,8 @@
|
|||
At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
|
||||
to load your new component into its page:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code bootstrap(MyAppComponent);
|
||||
code-example(language="javaScript").
|
||||
bootstrap(MyAppComponent);
|
||||
|
||||
|
||||
p.
|
||||
|
@ -178,22 +175,21 @@
|
|||
include the traceur-runtime and the Angular bundle.
|
||||
Instantiate the <code>my-app</code> component in the <code>body</code>.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<!-- index.html -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
code-example(language="html" format="linenums").
|
||||
<!-- index.html -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- The app component created in app.ts -->
|
||||
<my-app></my-app>
|
||||
<!-- The app component created in app.ts -->
|
||||
<my-app></my-app>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
// STEP 7 - Declare the HTML ##########################
|
||||
.l-main-section
|
||||
|
@ -215,22 +211,20 @@
|
|||
Add the System.js dependency in the <code><head></code> tag, so that
|
||||
it looks like:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
|
||||
</head>
|
||||
code-example(language="html" format="linenums").
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
|
||||
</head>
|
||||
|
||||
p.
|
||||
Add the following module-loading code:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<my-app></my-app>
|
||||
<script>System.import('app');</script>
|
||||
code-example(language="html" format="linenums").
|
||||
<my-app></my-app>
|
||||
<script>System.import('app');</script>
|
||||
|
||||
|
||||
// STEP 8 - Run a local server ##########################
|
||||
|
@ -247,11 +241,11 @@
|
|||
<code><b>sudo</b> npm ...</code>)
|
||||
For example:
|
||||
|
||||
pre.prettyprint.code.
|
||||
# From the directory that contains index.html:
|
||||
npm install -g http-server # Or sudo npm install -g http-server
|
||||
http-server # Creates a server at localhost:8080
|
||||
# In a browser, visit localhost:8080/index.html
|
||||
code-example.
|
||||
# From the directory that contains index.html:
|
||||
npm install -g http-server # Or sudo npm install -g http-server
|
||||
http-server # Creates a server at localhost:8080
|
||||
# In a browser, visit localhost:8080/index.html
|
||||
|
||||
|
||||
// WHAT'S NEXT... ##########################
|
||||
|
|
|
@ -50,6 +50,7 @@
|
|||
code {
|
||||
background: none;
|
||||
font-size: 15px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ol {
|
||||
|
|
Loading…
Reference in New Issue