Skip to content

Commit b8fc4bb

Browse files
pietro909pietro909
authored
Merge pull request #5 from pietro909/upgrade/angular-2
Upgrade to Angular 2 final release
2 parents 187aa69 + 5731360 commit b8fc4bb

27 files changed

+7001
-186
lines changed

‎app/app.component.ts

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,73 @@
1-
import {Component, OnInit} from '@angular/core';
2-
import {Store, provideStore} from '@ngrx/store';
3-
import {Observable} from 'rxjs/Rx';
4-
import {ProximitySelector} from './components/proximity-selector.component';
5-
import {SearchBox} from './components/search-box.component';
6-
import {SearchReducer} from './reducers/search.reducer';
7-
import {CurrentSearch} from "./models/current-search.model";
8-
import {YouTubeService} from "./services/youtube.service";
9-
import {SearchResult} from "./models/search-result.model";
10-
11-
const storeManager = provideStore({ currentSearch: SearchReducer });
12-
13-
@Component({
14-
selector: 'my-app',
15-
providers: [ storeManager ],
16-
directives: [ SearchBox, ProximitySelector ],
17-
template: `
18-
<section class="col-md-8">
19-
<h1>{{title}}</h1>
20-
<div class="row col-md-8">
21-
<search-box [store]="store"></search-box>
22-
<proximity-selector [store]="store"></proximity-selector>
23-
</div>
24-
<div class="row col-md-8">
25-
<p>
26-
Try to type something in the searchbox, play with the location and with radius: the above state will
27-
always be consistent and up to date.
28-
</p>
29-
<p>{{ state | json }}</p>
30-
</div>
31-
<div class="row col-md-8">
32-
<div *ngFor="let result of searchResults" class="thumbnail col-sm-6 col-md-4">
33-
<div class="caption">
34-
<h3>{{ result.title }}</h3>
35-
</div>
36-
<!--<img src="{{ result.thumbnailUrl }}" />-->
37-
</div>
38-
</div>
39-
</section>
40-
`
41-
})
42-
43-
export class AppComponent implements OnInit {
44-
45-
title = 'One Source of Truth for Angular 2';
46-
47-
private state: CurrentSearch;
48-
49-
private currentSearch: Observable<CurrentSearch>;
50-
private searchResults: SearchResult[] = [];
51-
52-
constructor(
53-
private store: Store<CurrentSearch>,
54-
private youtube: YouTubeService
55-
) {
56-
this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
57-
this.youtube.searchResults.subscribe((results: SearchResult[]) => this.searchResults = results);
58-
}
59-
60-
ngOnInit() {
61-
this.currentSearch.subscribe((state: CurrentSearch) => {
62-
this.state = state;
63-
if (state && state.name && state.name.length > 0) {
64-
this.youtube.search(state)
65-
} else {
66-
this.searchResults = [];
67-
}
68-
});
69-
}
70-
71-
}
1+
import {Component, OnInit} from '@angular/core';
2+
import {Observable} from "rxjs";
3+
import {Store} from "@ngrx/store";
4+
5+
import {CurrentSearch} from "./models/current-search.model";
6+
import {SearchResult} from "./models/search-result.model";
7+
import {YouTubeService} from "./services/youtube.service";
8+
9+
@Component({
10+
selector: 'my-app',
11+
template: `
12+
<section class="col-md-8">
13+
<h1>{{title}}</h1>
14+
<div class="row col-md-8">
15+
<search-box [store]="store"></search-box>
16+
<proximity-selector [store]="store" [disabled]="disableSearch"
17+
[ngClass]="{ disabled: disableSearch }"></proximity-selector>
18+
</div>
19+
<div class="row col-md-8 alert alert-danger" *ngIf="disableSearch">
20+
<p>Can't use geolocalization with an empty searchbox</p>
21+
</div>
22+
<div class="row col-md-8">
23+
<p>
24+
Try to type something in the searchbox, play with the location and with radius: the above state will
25+
always be consistent and up to date.
26+
</p>
27+
<p class="state">{{ state | json }}</p>
28+
<p class="state" *ngIf="disableSearch">state is empty</p>
29+
<h2 *ngIf="!disableSearch">Search results:</h2>
30+
</div>
31+
<h2 *ngIf="disableSearch || searchResults.length == 0">No results</h2>
32+
<div class="row col-md-8">
33+
<div *ngFor="let result of searchResults" class="thumbnail col-sm-6 col-md-4">
34+
<div class="caption">
35+
<h3>{{ result.title }}</h3>
36+
</div>
37+
<img src="{{ result.thumbnailUrl }}" />
38+
</div>
39+
</div>
40+
</section>
41+
`
42+
})
43+
export class AppComponent implements OnInit {
44+
45+
title = 'One Source of Truth for Angular 2';
46+
47+
private state: CurrentSearch;
48+
private currentSearch: Observable<CurrentSearch>;
49+
private searchResults: SearchResult[] = [];
50+
private disableSearch = false;
51+
52+
constructor(
53+
private store: Store<CurrentSearch>,
54+
private youtube: YouTubeService
55+
) {
56+
this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
57+
this.youtube.searchResults.subscribe((results: SearchResult[]) => this.searchResults = results);
58+
}
59+
60+
ngOnInit() {
61+
this.currentSearch.subscribe((state: CurrentSearch) => {
62+
this.state = state;
63+
if (state && state.name && state.name.length > 0) {
64+
this.disableSearch = false;
65+
this.youtube.search(state)
66+
} else {
67+
this.disableSearch = true;
68+
this.searchResults = [];
69+
}
70+
});
71+
}
72+
73+
}

‎app/app.module.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import {AppComponent} from "./app.component";
4+
import {Store, StoreModule} from "@ngrx/store";
5+
import {SearchReducer} from "./reducers/search.reducer";
6+
import {YouTubeService} from "./services/youtube.service";
7+
import {HttpModule} from "@angular/http";
8+
import {SearchBox} from "./components/search-box.component";
9+
import {ProximitySelector} from "./components/proximity-selector.component";
10+
11+
const storeManager = StoreModule.provideStore ({ currentSearch: SearchReducer });
12+
13+
@NgModule({
14+
imports: [ BrowserModule, StoreModule, storeManager, HttpModule ],
15+
declarations: [ AppComponent, SearchBox, ProximitySelector ],
16+
bootstrap: [ AppComponent ],
17+
providers: [ YouTubeService ]
18+
})
19+
export class AppModule { }

‎app/components/proximity-selector.component.ts

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,25 @@ import {Store} from '@ngrx/store';
33

44
@Component({
55
selector: 'proximity-selector',
6-
inputs: ['store'],
76
template: `
87
<div class="input-group">
9-
<label for="useLocation">Use current location</label>
10-
<input type="checkbox"
8+
<label for="useLocation"
9+
[ngClass]="{'disabled': disabled}">
10+
Use current location
11+
</label>
12+
<input type="checkbox"
13+
id="useLocation"
1114
[disabled]="disabled"
1215
(change)="onLocation($event)">
1316
</div>
1417
<div class="input-group">
15-
<label for="locationRadius">Radius</label>
18+
<label for="locationRadius"
19+
[ngClass]="{'disabled': !active || disabled}">
20+
Radius
21+
</label>
1622
<input type="range" min="1" max="100" value="50"
17-
[disabled]="!active"
23+
id="locationRadius"
24+
[disabled]="!active || disabled"
1825
(change)="onRadius($event)">
1926
</div>
2027
`
@@ -27,10 +34,13 @@ export class ProximitySelector {
2734
radius: 'ProximitySelector:RADIUS',
2835
off: 'ProximitySelector:OFF'
2936
};
30-
37+
3138
@Input()
3239
store: Store<any>;
3340

41+
@Input()
42+
disabled: boolean;
43+
3444
active = false;
3545

3646
onLocation($event: any) {
@@ -65,4 +75,4 @@ export class ProximitySelector {
6575
});
6676
}
6777

68-
}
78+
}

‎app/components/search-box.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import {ElementRef, OnInit, Component, Input} from '@angular/core';
33
import {Store} from '@ngrx/store';
44

55
@Component({
6-
inputs: ['store'],
76
selector: 'search-box',
87
template: `
98
<input type="text" class="form-control" placeholder="Search" autofocus>
109
`
1110
})
1211

1312
export class SearchBox implements OnInit {
14-
13+
1514
static StoreEvents = {
1615
text: 'SearchBox:TEXT_CHANGED'
1716
};

‎app/main.ts

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import { bootstrap } from '@angular/platform-browser-dynamic';
2-
import { HTTP_PROVIDERS } from '@angular/http';
3-
4-
import { AppComponent } from './app.component';
5-
import {YouTubeService} from "./services/youtube.service";
6-
7-
bootstrap(AppComponent, [
8-
HTTP_PROVIDERS,
9-
YouTubeService
10-
]);
1+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
import { AppModule } from './app.module';
3+
4+
const platform = platformBrowserDynamic();
5+
6+
platform.bootstrapModule(AppModule);

‎app/reducers/search.reducer.ts

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,25 @@ import {CurrentSearch} from "../models/current-search.model";
55

66
export const SearchReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
77
switch (action.type) {
8-
case SearchBox.StoreEvents.text:
9-
return Object.assign({}, state, {
10-
name: action.payload.text
11-
});
12-
case ProximitySelector.StoreEvents.position:
13-
return Object.assign({}, state, {
14-
location: {
15-
latitude: action.payload.position.latitude,
16-
longitude: action.payload.position.longitude
17-
}
18-
});
19-
case ProximitySelector.StoreEvents.radius:
20-
return Object.assign({}, state, {
21-
radius: action.payload.radius
22-
});
23-
case ProximitySelector.StoreEvents.off:
24-
return Object.assign({}, state, {
25-
location: null
26-
});
8+
case SearchBox.StoreEvents.text:
9+
return Object.assign({}, state, {
10+
name: action.payload.text
11+
});
12+
case ProximitySelector.StoreEvents.position:
13+
return Object.assign({}, state, {
14+
location: {
15+
latitude: action.payload.position.latitude,
16+
longitude: action.payload.position.longitude
17+
}
18+
});
19+
case ProximitySelector.StoreEvents.radius:
20+
return Object.assign({}, state, {
21+
radius: action.payload.radius
22+
});
23+
case ProximitySelector.StoreEvents.off:
24+
return Object.assign({}, state, {
25+
location: null
26+
});
2727
default:
2828
return state;
2929
}

‎app/styles.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
h1 {
2+
color: #369;
3+
font-family: Arial, Helvetica, sans-serif;
4+
font-size: 250%;
5+
}
6+
h2, h3 {
7+
color: #444;
8+
font-family: Arial, Helvetica, sans-serif;
9+
font-weight: lighter;
10+
}
11+
body {
12+
margin: 2em;
13+
}
14+
search-box, proximity-selector {
15+
display: block;
16+
margin-top: 1.2rem;
17+
}
18+
.state {
19+
font-family: monospace;
20+
font-size: smaller;
21+
}
22+
.row {
23+
margin-bottom: 1.6rem;
24+
margin-top: 1.6rem;
25+
}
26+
label.disabled {
27+
color: darkgray;
28+
}

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

77
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
8+
<link href="app/styles.css" rel="stylesheet">
89

910
<script src="node_modules/zone.js/dist/zone.js"></script>
1011
<script src="node_modules/reflect-metadata/Reflect.js"></script>

‎old/app.component.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use strict";
2+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6+
return c > 3 && r && Object.defineProperty(target, key, r), r;
7+
};
8+
var core_1 = require('@angular/core');
9+
var store_1 = require('@ngrx/store');
10+
var proximity_selector_component_1 = require('./components/proximity-selector.component');
11+
var search_box_component_1 = require('./components/search-box.component');
12+
var search_reducer_1 = require('./reducers/search.reducer');
13+
var storeManager = store_1.provideStore({ currentSearch: search_reducer_1.SearchReducer });
14+
var AppComponent = (function () {
15+
function AppComponent(store, youtube) {
16+
var _this = this;
17+
this.store = store;
18+
this.youtube = youtube;
19+
this.title = 'One Source of Truth for Angular 2';
20+
this.searchResults = [];
21+
this.disableSearch = false;
22+
this.currentSearch = this.store.select('currentSearch');
23+
this.youtube.searchResults.subscribe(function (results) { return _this.searchResults = results; });
24+
}
25+
AppComponent.prototype.ngOnInit = function () {
26+
var _this = this;
27+
this.currentSearch.subscribe(function (state) {
28+
_this.state = state;
29+
if (state && state.name && state.name.length > 0) {
30+
_this.disableSearch = false;
31+
_this.youtube.search(state);
32+
}
33+
else {
34+
_this.disableSearch = true;
35+
_this.searchResults = [];
36+
}
37+
});
38+
};
39+
AppComponent = __decorate([
40+
core_1.Component({
41+
selector: 'my-app',
42+
providers: [storeManager],
43+
directives: [search_box_component_1.SearchBox, proximity_selector_component_1.ProximitySelector],
44+
template: "\n <section class=\"col-md-8\">\n <h1>{{title}}</h1>\n <div class=\"row col-md-8\">\n <search-box [store]=\"store\"></search-box>\n <proximity-selector [store]=\"store\" [disabled]=\"disableSearch\"\n [ngClass]=\"{ disabled: disableSearch }\"></proximity-selector>\n </div>\n <div class=\"row col-md-8 alert alert-danger\" *ngIf=\"disableSearch\">\n <p>Can't use geolocalization with an empty searchbox</p>\n </div>\n <div class=\"row col-md-8\">\n <p>\n Try to type something in the searchbox, play with the location and with radius: the above state will\n always be consistent and up to date.\n </p>\n <p class=\"state\">{{ state | json }}</p>\n <p class=\"state\" *ngIf=\"disableSearch\">{ }</p>\n </div>\n <h2 *ngIf=\"!disableSearch\">Search results:</h2>\n <h2 *ngIf=\"disableSearch || searchResults.length == 0\">No results</h2>\n <div class=\"row col-md-8\">\n <div *ngFor=\"let result of searchResults\" class=\"thumbnail col-sm-6 col-md-4\">\n <div class=\"caption\">\n <h3>{{ result.title }}</h3>\n </div>\n <!--<img src=\"{{ result.thumbnailUrl }}\" />-->\n </div>\n </div>\n </section>\n "
45+
})
46+
], AppComponent);
47+
return AppComponent;
48+
}());
49+
exports.AppComponent = AppComponent;

‎old/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use strict";
2+
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
3+
var http_1 = require('@angular/http');
4+
var app_component_1 = require('./app.component');
5+
var youtube_service_1 = require("./services/youtube.service");
6+
platform_browser_dynamic_1.bootstrap(app_component_1.AppComponent, [
7+
http_1.HTTP_PROVIDERS,
8+
youtube_service_1.YouTubeService
9+
]);

0 commit comments

Comments
 (0)