feat(ts): moving dev guide TS.
Removes plunker links as they don't support TS yet.
This commit is contained in:
Rado Kirov
parent
8455cf49c3
commit
bdf28bc026
|
|
@ -1,8 +1,3 @@
|
|||
.statement
|
||||
h4 Live Examples
|
||||
p.
|
||||
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview'> ES5 Example</a>.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2#section-displaying-controller-properties Displaying controller properties
|
||||
|
|
@ -15,6 +10,14 @@
|
|||
figure.image-display
|
||||
img(src='displaying-data-example1.png')
|
||||
|
||||
.callout.is-helpful
|
||||
header Typescript vs ES5
|
||||
p.
|
||||
Although we work through the examples in TypeScript, you can also use
|
||||
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
|
||||
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
|
||||
<code>.ts</code>.
|
||||
|
||||
.l-main-section
|
||||
h2#section-create-an-entry-point Create an entry point
|
||||
|
||||
|
|
@ -33,26 +36,9 @@
|
|||
| The simple method for binding text into templates is through interpolation where you put the name of a property
|
||||
| inside <strong>{{ }}</strong>.
|
||||
|
||||
p To see this working, create another file, <code>show-properties.js</code>, and add the following:
|
||||
p To see this working, create another file, <code>show-properties.ts</code>, and add the following:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
// ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "display"
|
||||
}),
|
||||
new angular.View({
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
// TypeScript
|
||||
|
|
@ -75,6 +61,22 @@
|
|||
this.myName = "Alice";
|
||||
}
|
||||
}
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
// ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "display"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
p.
|
||||
You've just defined a component that encompasses a view and controller for the app. The view
|
||||
defines a template:
|
||||
|
|
@ -124,13 +126,6 @@
|
|||
h2#Create-an-array Create an array property and use For on the view
|
||||
p Moving up from a single property, create an array to display as a list.
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//Typescript
|
||||
|
|
@ -138,6 +133,13 @@
|
|||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
p.
|
||||
You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
|
||||
with one for each item in the array.
|
||||
|
|
@ -167,20 +169,20 @@
|
|||
</ul>
|
||||
`,
|
||||
p.
|
||||
To make this work, you'll also need to add the <code>angular.For</code> directive used by the template so
|
||||
To make this work, you'll also need to add the <code>For</code> directive used by the template so
|
||||
that Angular knows to include it:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
directives: [angular.For]
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//Typescript
|
||||
import {Component, View, bootstrap, For} from
|
||||
...
|
||||
directives: [For]
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
directives: [angular.For]
|
||||
p Reload and you've got your list of friends!
|
||||
p.
|
||||
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
|
||||
|
|
@ -211,28 +213,32 @@
|
|||
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
function FriendsService() {
|
||||
class FriendsService {
|
||||
names: Array<string>;
|
||||
constructor() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
p.
|
||||
Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
|
||||
names in DisplayComponent to the names provided by the service you passed in.
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
function DisplayComponent(friends) {
|
||||
this.myName = "Alice";
|
||||
this.names = friends.names;
|
||||
class DisplayComponent {
|
||||
names: Array<string>;
|
||||
constructor(friendsService: FriendsService) {
|
||||
this.names = friendsService.names;
|
||||
}
|
||||
}
|
||||
p And then make FriendsService available to dependency injection
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
DisplayComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "display",
|
||||
injectables: [FriendsService]
|
||||
}),
|
||||
@Component({
|
||||
...
|
||||
DisplayComponent.parameters = [[FriendsService]];
|
||||
injectables: [DisplayComponent]
|
||||
})
|
||||
...
|
||||
class DisplayComponent {...
|
||||
.callout.is-helpful
|
||||
header ES5 Note
|
||||
p.
|
||||
|
|
@ -240,6 +246,24 @@
|
|||
working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
class FriendsService {
|
||||
names: Array<string>;
|
||||
constructor() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
...
|
||||
class DisplayComponent {
|
||||
names: Array<string>;
|
||||
|
||||
constructor(friendsService: FriendsService) {
|
||||
this.names = friendsService.names;
|
||||
}
|
||||
}
|
||||
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
|
|
@ -251,11 +275,11 @@
|
|||
this.names = friends.names;
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.Component({
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "display",
|
||||
injectables: [FriendsService]
|
||||
}),
|
||||
new angular.View({
|
||||
new angular.ViewAnnotation({
|
||||
template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
|
|
@ -264,12 +288,6 @@
|
|||
document.addEventListener("DOMContentLoaded", function() {
|
||||
angular.bootstrap(DisplayComponent);
|
||||
});
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
import {Component, View, bootstrap, For} from
|
||||
...
|
||||
directives: [For]
|
||||
.l-main-section
|
||||
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
|
||||
p.
|
||||
|
|
@ -279,47 +297,23 @@
|
|||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<p *if="names.length > 3">You have many friends!</p>
|
||||
p You'll also need to add the If directive so Angular knows to include it.
|
||||
p You'll also need to add the <code>If</code> directive so Angular knows to include it.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
directives: [angular.For, angular.If]
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//Typescript
|
||||
import {Component, View, bootstrap, For, If} from
|
||||
...
|
||||
directives: [For, If]
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
directives: [angular.For, angular.If]
|
||||
p.
|
||||
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends.
|
||||
Remove two items from the list, reload your browser, and see that the message no longer displays.
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "display"
|
||||
}),
|
||||
new angular.View({
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<p *if="names.length > 3">You have many friends!</p>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
|
|
@ -342,9 +336,33 @@
|
|||
})
|
||||
class DisplayComponent {
|
||||
myName: string;
|
||||
todos: Array<string>;
|
||||
todos: Array<string>
|
||||
constructor() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "display"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<p *if="names.length > 3">You have many friends!</p>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
.statement
|
||||
h4 Live Examples
|
||||
p.
|
||||
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/lt7vPiJYwkHDKaTHGCUC?p=preview')>TypeScript Example</a> or <a href='http://plnkr.co/edit/CqquuEyUw2LgwY0IrXUZ?p=preview'> ES5 Example</a>.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2#section-its-all-a-tree It's all a tree
|
||||
|
|
@ -16,24 +11,6 @@
|
|||
component that uses a <code><child></code> component like so:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function ParentComponent() {
|
||||
this.message = "I'm the parent";
|
||||
}
|
||||
ParentComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "parent"
|
||||
}),
|
||||
new angular.View({
|
||||
template:
|
||||
'<h1>{{ message }}</h1>' +
|
||||
'<child></child>',
|
||||
directives: [ChildComponent]
|
||||
})
|
||||
];
|
||||
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
|
|
@ -54,25 +31,28 @@
|
|||
this.message = "I'm the parent";
|
||||
}
|
||||
}
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function ParentComponent() {
|
||||
this.message = "I'm the parent";
|
||||
}
|
||||
ParentComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "parent"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<h1>{{ message }}</h1>' +
|
||||
'<child></child>',
|
||||
directives: [ChildComponent]
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
p You then just need to write the <code>ChildComponent</code> class to make it work:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function ChildComponent() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
ChildComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "child"
|
||||
}),
|
||||
new angular.View({
|
||||
template: '<p> {{ message }} </p>'
|
||||
})
|
||||
];
|
||||
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
|
|
@ -85,10 +65,26 @@
|
|||
`
|
||||
})
|
||||
class ChildComponent {
|
||||
message: string;
|
||||
constructor() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
}
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function ChildComponent() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
ChildComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "child"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '<p> {{ message }} </p>'
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
p.
|
||||
Notice that in addition to using the <code><child></code> element in the parent template, you also need to
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
.statement
|
||||
h4 Live Examples
|
||||
p.
|
||||
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2#section-install-or-plunker Install Angular or Use Plunker
|
||||
h2#section-install-or-plunker Install Angular
|
||||
p There are four steps to create any Angular app:
|
||||
ol
|
||||
li Create an entry point HTML file where users will start
|
||||
|
|
@ -14,24 +9,27 @@
|
|||
li Bootstrap Angular
|
||||
|
||||
p.
|
||||
You can edit and test out your apps either though serving local files through a web server or through a service like
|
||||
Plunker.
|
||||
|
||||
.callout.is-helpful
|
||||
header Plunker is the fastest setup
|
||||
p.
|
||||
Plunker is a free online text editor. You can use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> for Angular 2 to get going without any setup.
|
||||
You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
|
||||
|
||||
p.
|
||||
For Plunker, just use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> to get going. If you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
|
||||
When you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code python -m SimpleHTTPServer 8000
|
||||
|
||||
.callout.is-helpful
|
||||
header Typescript vs ES5
|
||||
p.
|
||||
Although we work through the examples in TypeScript, you can also use
|
||||
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
|
||||
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
|
||||
<code>.ts</code>.
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2#section-create-an-entry-point Create an entry point
|
||||
p.
|
||||
Create an <code>index.html</code> file and add the Angular library tags and a <code>main.js</code> file where
|
||||
Create an <code>index.html</code> file and add the Angular library tags and a <code>main.ts</code> file where
|
||||
you'll build your first component.
|
||||
|
||||
p.
|
||||
|
|
@ -39,21 +37,9 @@
|
|||
application.
|
||||
|
||||
p.
|
||||
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. System requires mapping the code file paths to understand what to be load.
|
||||
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-html(data-name="es5")
|
||||
code.
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
pre.prettyprint.lang-html(data-name="typescript")
|
||||
code.
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -61,22 +47,27 @@
|
|||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.21/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.config({
|
||||
paths: {
|
||||
'*': '*.js',
|
||||
'angular2/*': 'angular2/*',
|
||||
}
|
||||
});
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
pre.prettyprint.lang-html(data-name="es5")
|
||||
code.
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.21/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
.callout.is-helpful
|
||||
header Don't use code.angularjs.org in a live app
|
||||
|
|
@ -88,28 +79,11 @@
|
|||
h2#section-set-up-the-starting-component Set up the starting component
|
||||
|
||||
p.
|
||||
In <code>main.js</code>, create a class called <code>AppComponent</code>, configure it to bind to the
|
||||
In <code>main.ts</code>, create a class called <code>AppComponent</code>, configure it to bind to the
|
||||
<code><my-app></code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
|
||||
it all off like this:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
function AppComponent() {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new angular.View({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
|
@ -125,13 +99,37 @@
|
|||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
function AppComponent() {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
|
||||
.callout.is-helpful
|
||||
header Annotations vs Decorators
|
||||
p.
|
||||
If you are transpiling using a tool that translates the <code>@</code> symbols to
|
||||
annotations (for example Traceur), you will need to import the annotation versions of
|
||||
Component and View. That can be easily achieved using
|
||||
<code>import {ComponentAnnotation as Component, ViewAnnotation as View}</code>.
|
||||
|
||||
.l-main-section
|
||||
h2#section-run-it Run it!
|
||||
|
||||
p.
|
||||
Open <code>index.html</code> through your web server or hit the <strong>Run</strong> button if using Plunker and
|
||||
you should see:
|
||||
Open <code>index.html</code> through your web server and you should see:
|
||||
div(align='center')
|
||||
img(src='setup-example1.png')
|
||||
|
||||
|
|
@ -181,18 +179,15 @@
|
|||
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-typescript(data-name="es5")
|
||||
code.
|
||||
// window.angular is available because the script file attaches the angular property to the window
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
...
|
||||
// bootstrap is available for use because it was imported from angular core
|
||||
bootstrap(AppComponent);
|
||||
|
||||
|
||||
|
||||
pre.prettyprint.lang-typescript(data-name="es5")
|
||||
code.
|
||||
// window.angular is available because the script file attaches the angular property to the window
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
.statement
|
||||
h4 Live Examples
|
||||
p.
|
||||
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
|
||||
|
||||
.l-main-section
|
||||
h2#section-responding-to-user-input Responding to user input with event syntax
|
||||
|
||||
|
|
@ -43,6 +38,18 @@
|
|||
on the array when called.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
class TodoList {
|
||||
todos: Array<string>;
|
||||
constructor() {
|
||||
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
||||
}
|
||||
addTodo(todo: string) {
|
||||
this.todos.push(todo);
|
||||
}
|
||||
}
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
|
|
@ -53,19 +60,6 @@
|
|||
};
|
||||
}
|
||||
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
class TodoList {
|
||||
todos: Array<string>
|
||||
constructor() {
|
||||
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
||||
}
|
||||
addTodo(todo: string) {
|
||||
this.todos.push(todo);
|
||||
}
|
||||
}
|
||||
|
||||
.callout.is-helpful
|
||||
header Production Best Practice
|
||||
p.
|
||||
|
|
@ -118,45 +112,6 @@
|
|||
h2#section-final-code Final Code
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function TodoList() {
|
||||
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
||||
|
||||
this.addTodo = function(todo) {
|
||||
this.todos.push(todo);
|
||||
};
|
||||
|
||||
this.doneTyping = function($event) {
|
||||
if($event.which === 13) {
|
||||
this.addTodo($event.target.value);
|
||||
$event.target.value = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TodoList.annotations = [
|
||||
new angular.Component({
|
||||
selector: "todo-list"
|
||||
}),
|
||||
new angular.View({
|
||||
template:
|
||||
'<ul>' +
|
||||
'<li *for="#todo of todos">' +
|
||||
'{{ todo }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<input #textbox (keyup)="doneTyping($event)">' +
|
||||
'<button (click)="addTodo(textbox.value)">Add Todo</button>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
angular.bootstrap(TodoList);
|
||||
});
|
||||
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
|
|
@ -179,7 +134,7 @@
|
|||
directives: [For, If]
|
||||
})
|
||||
class TodoList {
|
||||
todos: Array<string>;
|
||||
todos: Array<string>;
|
||||
|
||||
constructor() {
|
||||
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
||||
|
|
@ -198,3 +153,42 @@
|
|||
}
|
||||
|
||||
bootstrap(TodoList);
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function TodoList() {
|
||||
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
||||
|
||||
this.addTodo = function(todo) {
|
||||
this.todos.push(todo);
|
||||
};
|
||||
|
||||
this.doneTyping = function($event) {
|
||||
if($event.which === 13) {
|
||||
this.addTodo($event.target.value);
|
||||
$event.target.value = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TodoList.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "todo-list"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<ul>' +
|
||||
'<li *for="#todo of todos">' +
|
||||
'{{ todo }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<input #textbox (keyup)="doneTyping($event)">' +
|
||||
'<button (click)="addTodo(textbox.value)">Add Todo</button>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
angular.bootstrap(TodoList);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue