forked from PatrickJS/PatrickJS-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.ts
140 lines (119 loc) · 3.57 KB
/
app.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/// <reference path="../typings/_custom.d.ts" />
/*
* Angular 2 decorators and services
*/
import {Directive, Component, View, ElementRef} from 'angular2/angular2';
import {RouteConfig, Router} from 'angular2/router';
import {Http} from 'angular2/http';
/*
* Angular Directives
*/
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {ROUTER_DIRECTIVES} from 'angular2/router';
/*
* Directive
* XLarge is a simple directive to show how one of made
*/
@Directive({
selector: '[x-large]' // using [ ] means selecting attributes
})
class XLarge {
constructor(element: ElementRef) {
// simple DOM manipulation to set font size to x-large
// `nativeElement` is the direct reference to the DOM element
element.nativeElement.fontSize = 'x-large';
}
}
/*
* App Component
* Top Level Component
*/
@Component({
// The selector is what angular internally uses
// for `document.querySelectorAll(selector)` in our index.html
// where, in this case, selector is the string 'app'
selector: 'app' // <app></app>
})
@View({
// We need to tell Angular's compiler which directives are in our template.
// Doing so will allow Angular to attach our behavior to an element
directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES, XLarge ],
// Our list of styles in our component. We may add more to compose many styles together
styles: [`
.title {
font-family: Arial, Helvetica, sans-serif;
}
main {
padding: 1em;
}
`],
// Every Angular template is first compiled by the browser before Angular runs it's compiler
template: `
<header>
<h1 class="title">Hello {{ title }}</h1>
</header>
<main>
Your Content Here
<div>
<input type="text" [value]="title" (input)="title = $event.target.value" autofocus>
<!--
Rather than wiring up two-way data-binding ourselves
we can use Angular's [(ng-model)] syntax
<input type="text" [(ng-model)]="title">
-->
</div>
<pre>this.title = {{ title | json }}</pre>
<pre>this.data = {{ data | json }}</pre>
</main>
<footer>
WebPack Angular 2 Starter by <a href="https://twitter.com/AngularClass">@AngularClass</a>
</footer>
`
})
export class App {
// These are member type
title: string;
data: Array<any> = []; // default data
constructor(public http: Http) {
this.title = 'Angular 2';
// Our API
// npm run express-install
// npm run express
const BASE_URL = 'http://localhost:3001';
const TODO_API_URL = '/api/todos';
const JSON_HEADERS = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
this.http
.get(BASE_URL + TODO_API_URL, {
headers: JSON_HEADERS
})
.toRx()
.map(res => res.json())
.subscribe(
// onNext callback
data => this.serverData(data),
// onError callback
err => this.errorMessage(err)
);//end http
}
serverData(data) {
console.log('data', data);
this.data = data;
}//serverData
errorMessage(err) {
if (err && (/Unexpected token/).test(err.message) || err.status === 0) {
console.info(`${'\n'
} // You must run these commands for the Http API to work in another process ${'\n'
} npm run express-install ${'\n'
} npm run express
`);
}//end err.message
}//errorMessage
}
/*
* Please review the examples/ folder for more angular app examples
* For help or questions please contact us at @AngularClass on twitter
* or via chat on gitter at https://gitter.im/angular-class/angular2-webpack-starter
*/