forked from PatrickJS/PatrickJS-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.ts
More file actions
143 lines (123 loc) · 3.97 KB
/
app.ts
File metadata and controls
143 lines (123 loc) · 3.97 KB
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
140
141
142
143
/*
* Angular 2 decorators and services
*/
import {Directive, Component, View, ElementRef, Renderer} from 'angular2/web_worker/worker';
// for WebWorker support we need to use the types in this directory
import {RouteConfig, Router} from 'angular2/router';
import {Http, Headers} from 'angular2/http';
/*
* Angular Directives
*/
import {CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/web_worker/worker';
import {ROUTER_DIRECTIVES} from 'angular2/router';
/*
* Directive
* XLarge is a simple directive to show how one is made
*/
@Directive({
selector: '[x-large]' // using [ ] means selecting attributes
})
class XLarge {
constructor(element: ElementRef, renderer: Renderer) {
renderer.setElementStyle(element, '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>
// 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 x-large>
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
// TypeScript public modifiers
constructor(public http: Http) {
this.title = 'Angular 2';
}
onInit() {
// Our API
// Before you start the app, run these commands in another process:
//
// - npm run express-install
// - npm run express
//
// This will start a process that will listen for requests on port 3001
const BASE_URL = 'http://localhost:3001';
const TODO_API_URL = '/api/todos';
const JSON_HEADERS = new Headers();
JSON_HEADERS.append('Accept', 'application/json');
JSON_HEADERS.append('Content-Type', 'application/json');
this.http
.get(BASE_URL + TODO_API_URL, {
headers: JSON_HEADERS
})
.map(res => res.json())
.subscribe(
// onNext callback
data => this.serverData(data),
// onError callback
err => this.errorMessage(err),
// onComplete callback
() => console.log('complete')
);//end http
}
serverData(data) {
console.log('data', data);
this.data = data;
}//serverData
errorMessage(err) {
console.info(`${'\n'
} // You must run these commands in another process for the Http API to work ${'\n'
} npm run express-install ${'\n'
} npm run express
`);
}//errorMessage
}
/*
* Please review the examples/ folder for more angular app examples
* (The examples may not be updated as quickly. Please open an issue on github for us to update it)
* you can change the `entry` in webpack.config to quickly view the examples
* For help or questions please contact us at @AngularClass on twitter
* or our chat on Slack at https://AngularClass.com/slack-join
* or via chat on Gitter at https://gitter.im/AngularClass/angular2-webpack-starter
*/