Skip to content

Instantly share code, notes, and snippets.

@easierbycode

easierbycode/config.js

Created July 7, 2016 20:21
Show Gist options
  • Save easierbycode/61c949fe98dcf3212d1edc7285520922 to your computer and use it in GitHub Desktop.
Save easierbycode/61c949fe98dcf3212d1edc7285520922 to your computer and use it in GitHub Desktop.
Download ZIP
HTTP polling in Angular 2
Raw
config.js
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: './src'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
Raw
index.html
<html>
<head>
<title>RxJS in Angular 2</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/http.dev.js"></script>
<script src="unscripted/ngrx.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>
Raw
src\app.ts
import { Component } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
@Component({
selector: 'app',
template: `
<pre>{{wifiNetworks | async | json}}</pre>
`
})
export class App {
constructor(http: Http){
this.wifiNetworks = Observable.interval( 5000 )
.flatMap(() => http.get( 'https://192.168.44.1:88/api/rescan_wifi'))
.map(res => res.json() as any[]);
this.wifiNetworks.subscribe( console.log.bind(console) );
}
}
Raw
src\main.ts
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import { HTTP_PROVIDERS } from 'angular2/http';
bootstrap(App, [HTTP_PROVIDERS]).then(
()=> console.log('App running...'),
err=> console.log(err)
);
Raw
style.css
* {
font-family: Arial, Helvetica, sans-serif;
}
Raw
unscripted\ngrx.d.ts
declare module "dispatcher" {
import { Subject } from 'rxjs/Subject';
export class Dispatcher<T> extends Subject<T> {
dispatch(action: T): void;
}
}
declare module "store-backend" {
import 'rxjs/add/operator/let';
import 'rxjs/add/operator/scan';
import { Dispatcher } from "dispatcher";
import { Middleware, Reducer } from "interfaces";
export const ActionTypes: {
INIT: string;
};
export class StoreBackend {
protected _dispatcher: Dispatcher<any>;
protected _reducer: Reducer<any>;
protected _initialState: any;
protected _preMiddleware: Middleware;
protected _postMiddleware: Middleware;
constructor(_dispatcher: Dispatcher<any>, _reducer: Reducer<any>, _initialState: any, _preMiddleware?: Middleware, _postMiddleware?: Middleware);
protected _init(): void;
connect(nextCallbackFn: (state: any) => void): void;
replaceReducer(reducer: Reducer<any>): void;
}
}
declare module "store" {
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/distinctUntilChanged';
import { Action, Reducer } from "interfaces";
import { StoreBackend } from "store-backend";
import { Dispatcher } from "dispatcher";
export class Store<T> extends BehaviorSubject<T> {
private _dispatcher;
private _backend;
constructor(_dispatcher: Dispatcher<Action>, _backend: StoreBackend, initialState?: T);
select<R>(keyOrSelector: ((state: T) => R) | string | number | symbol): Observable<R>;
getState(): any;
dispatch(action: Action): void;
next(action: any): void;
error(error?: any): void;
replaceReducer<V>(reducer: Reducer<V>): void;
}
}
declare module "interfaces" {
import { Observable } from 'rxjs/Observable';
export interface Action {
type: string;
payload?: any;
}
export interface Reducer<T> {
(state: T, action: Action): T;
}
export interface Middleware {
(observable: Observable<any>): Observable<any>;
}
}
declare module "utils" {
import { Reducer } from "interfaces";
export function combineReducers(reducers: any): Reducer<any>;
export const compose: (...funcs: any[]) => (...args: any[]) => any;
}
declare module "ng2" {
import { Provider } from 'angular2/core';
import { Middleware } from "interfaces";
export const PRE_MIDDLEWARE: any;
export const POST_MIDDLEWARE: any;
export const RESOLVED_PRE_MIDDLEWARE: any;
export const RESOLVED_POST_MIDDLEWARE: any;
export const REDUCER: any;
export const INITIAL_STATE: any;
export function provideStore(reducer: any, initialState?: any): any[];
export function usePreMiddleware(...middleware: Array<Middleware | Provider>): any[];
export function usePostMiddleware(...middleware: Array<Middleware | Provider>): any[];
export function createMiddleware(useFactory: (...deps: any[]) => Middleware, deps?: any[]): Provider;
export function provideMiddlewareForToken(token: any, _middleware: any[]): Provider[];
}
declare module "@ngrx/store" {
export * from "interfaces";
export * from "store";
export * from "utils";
export * from "dispatcher";
export * from "store-backend";
export * from "ng2";
}
Raw
unscripted\ngrx.js
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
System.register("dispatcher", ['rxjs/Subject'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var Subject_1;
var Dispatcher;
return {
setters:[
function (Subject_1_1) {
Subject_1 = Subject_1_1;
}],
execute: function() {
Dispatcher = (function (_super) {
__extends(Dispatcher, _super);
function Dispatcher() {
_super.apply(this, arguments);
}
Dispatcher.prototype.dispatch = function (action) {
this.next(action);
};
return Dispatcher;
}(Subject_1.Subject));
exports_1("Dispatcher", Dispatcher);
}
}
});
System.register("store-backend", ['rxjs/add/operator/let', 'rxjs/add/operator/scan'], function(exports_2, context_2) {
"use strict";
var __moduleName = context_2 && context_2.id;
var ActionTypes, StoreBackend;
return {
setters:[
function (_1) {},
function (_2) {}],
execute: function() {
exports_2("ActionTypes", ActionTypes = {
INIT: '@@ngrx/INIT'
});
StoreBackend = (function () {
function StoreBackend(_dispatcher, _reducer, _initialState, _preMiddleware, _postMiddleware) {
if (_preMiddleware === void 0) { _preMiddleware = function (t) { return t; }; }
if (_postMiddleware === void 0) { _postMiddleware = function (t) { return t; }; }
this._dispatcher = _dispatcher;
this._reducer = _reducer;
this._initialState = _initialState;
this._preMiddleware = _preMiddleware;
this._postMiddleware = _postMiddleware;
}
StoreBackend.prototype._init = function () {
this._dispatcher.dispatch({ type: ActionTypes.INIT });
};
StoreBackend.prototype.connect = function (nextCallbackFn) {
var _this = this;
this._dispatcher
.let(this._preMiddleware)
.scan(function (state, action) { return _this._reducer(state, action); }, this._initialState)
.let(this._postMiddleware)
.subscribe(nextCallbackFn);
this._init();
};
StoreBackend.prototype.replaceReducer = function (reducer) {
this._reducer = reducer;
this._init();
};
return StoreBackend;
}());
exports_2("StoreBackend", StoreBackend);
}
}
});
System.register("store", ['rxjs/subject/BehaviorSubject', 'rxjs/add/operator/map', 'rxjs/add/operator/distinctUntilChanged'], function(exports_3, context_3) {
"use strict";
var __moduleName = context_3 && context_3.id;
var BehaviorSubject_1;
var Store;
return {
setters:[
function (BehaviorSubject_1_1) {
BehaviorSubject_1 = BehaviorSubject_1_1;
},
function (_3) {},
function (_4) {}],
execute: function() {
Store = (function (_super) {
__extends(Store, _super);
function Store(_dispatcher, _backend, initialState) {
var _this = this;
_super.call(this, initialState);
this._dispatcher = _dispatcher;
this._backend = _backend;
_backend.connect(function (state) { return _super.prototype.next.call(_this, state); });
}
Store.prototype.select = function (keyOrSelector) {
if (typeof keyOrSelector === 'string' ||
typeof keyOrSelector === 'number' ||
typeof keyOrSelector === 'symbol') {
return this.map(function (state) { return state[keyOrSelector]; }).distinctUntilChanged();
}
else if (typeof keyOrSelector === 'function') {
return this.map(keyOrSelector).distinctUntilChanged();
}
else {
throw new TypeError("Store@select Unknown Parameter Type: "
+ ("Expected type of function or valid key type, got " + typeof keyOrSelector));
}
};
Store.prototype.getState = function () {
return this.value;
};
Store.prototype.dispatch = function (action) {
this._dispatcher.dispatch(action);
};
Store.prototype.next = function (action) {
this._dispatcher.next(action);
};
Store.prototype.error = function (error) {
this._dispatcher.error(error);
};
Store.prototype.replaceReducer = function (reducer) {
this._backend.replaceReducer(reducer);
};
return Store;
}(BehaviorSubject_1.BehaviorSubject));
exports_3("Store", Store);
}
}
});
System.register("interfaces", [], function(exports_4, context_4) {
"use strict";
var __moduleName = context_4 && context_4.id;
return {
setters:[],
execute: function() {
}
}
});
System.register("utils", [], function(exports_5, context_5) {
"use strict";
var __moduleName = context_5 && context_5.id;
var compose;
function combineReducers(reducers) {
var reducerKeys = Object.keys(reducers);
var finalReducers = {};
for (var i = 0; i < reducerKeys.length; i++) {
var key = reducerKeys[i];
if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key];
}
}
var finalReducerKeys = Object.keys(finalReducers);
return function combination(state, action) {
if (state === void 0) { state = {}; }
var hasChanged = false;
var nextState = {};
for (var i = 0; i < finalReducerKeys.length; i++) {
var key = finalReducerKeys[i];
var reducer = finalReducers[key];
var previousStateForKey = state[key];
var nextStateForKey = reducer(previousStateForKey, action);
nextState[key] = nextStateForKey;
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
}
return hasChanged ? nextState : state;
};
}
exports_5("combineReducers", combineReducers);
return {
setters:[],
execute: function() {
exports_5("compose", compose = function () {
var funcs = [];
for (var _i = 0; _i < arguments.length; _i++) {
funcs[_i - 0] = arguments[_i];
}
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i - 0] = arguments[_i];
}
if (funcs.length === 0) {
return args[0];
}
var last = funcs[funcs.length - 1];
var rest = funcs.slice(0, -1);
return rest.reduceRight(function (composed, f) { return f(composed); }, last.apply(void 0, args));
};
});
}
}
});
System.register("ng2", ['angular2/core', "dispatcher", "store", "store-backend", "utils"], function(exports_6, context_6) {
"use strict";
var __moduleName = context_6 && context_6.id;
var core_1, dispatcher_1, store_1, store_backend_1, utils_1;
var PRE_MIDDLEWARE, POST_MIDDLEWARE, RESOLVED_PRE_MIDDLEWARE, RESOLVED_POST_MIDDLEWARE, REDUCER, INITIAL_STATE, dispatcherProvider, storeProvider, storeBackendProvider, resolvedPreMiddlewareProvider, resolvedPostMiddlewareProvider;
function provideStore(reducer, initialState) {
return [
core_1.provide(REDUCER, {
useFactory: function () {
if (typeof reducer === 'function') {
return reducer;
}
return utils_1.combineReducers(reducer);
}
}),
core_1.provide(INITIAL_STATE, {
deps: [REDUCER],
useFactory: function (reducer) {
if (initialState === undefined) {
return reducer(undefined, { type: store_backend_1.ActionTypes.INIT });
}
return initialState;
}
}),
core_1.provide(PRE_MIDDLEWARE, { multi: true, useValue: (function (T) { return T; }) }),
core_1.provide(POST_MIDDLEWARE, { multi: true, useValue: (function (T) { return T; }) }),
dispatcherProvider,
storeProvider,
storeBackendProvider,
resolvedPreMiddlewareProvider,
resolvedPostMiddlewareProvider
];
}
exports_6("provideStore", provideStore);
function usePreMiddleware() {
var middleware = [];
for (var _i = 0; _i < arguments.length; _i++) {
middleware[_i - 0] = arguments[_i];
}
return provideMiddlewareForToken(PRE_MIDDLEWARE, middleware);
}
exports_6("usePreMiddleware", usePreMiddleware);
function usePostMiddleware() {
var middleware = [];
for (var _i = 0; _i < arguments.length; _i++) {
middleware[_i - 0] = arguments[_i];
}
return provideMiddlewareForToken(POST_MIDDLEWARE, middleware);
}
exports_6("usePostMiddleware", usePostMiddleware);
function createMiddleware(useFactory, deps) {
return core_1.provide(new core_1.OpaqueToken('@ngrx/store middleware'), {
deps: deps,
useFactory: useFactory
});
}
exports_6("createMiddleware", createMiddleware);
function provideMiddlewareForToken(token, _middleware) {
function isProvider(t) {
return t instanceof core_1.Provider;
}
var provider = core_1.provide(token, {
multi: true,
deps: [core_1.Injector],
useFactory: function (injector) {
var middleware = _middleware.map(function (m) {
if (isProvider(m)) {
return injector.get(m.token);
}
return m;
});
return utils_1.compose.apply(void 0, middleware);
}
});
return _middleware.filter(isProvider).concat([provider]);
}
exports_6("provideMiddlewareForToken", provideMiddlewareForToken);
return {
setters:[
function (core_1_1) {
core_1 = core_1_1;
},
function (dispatcher_1_1) {
dispatcher_1 = dispatcher_1_1;
},
function (store_1_1) {
store_1 = store_1_1;
},
function (store_backend_1_1) {
store_backend_1 = store_backend_1_1;
},
function (utils_1_1) {
utils_1 = utils_1_1;
}],
execute: function() {
exports_6("PRE_MIDDLEWARE", PRE_MIDDLEWARE = new core_1.OpaqueToken('ngrx/store/pre-middleware'));
exports_6("POST_MIDDLEWARE", POST_MIDDLEWARE = new core_1.OpaqueToken('ngrx/store/post-middleware'));
exports_6("RESOLVED_PRE_MIDDLEWARE", RESOLVED_PRE_MIDDLEWARE = new core_1.OpaqueToken('ngrx/store/resolved-pre-middleware'));
exports_6("RESOLVED_POST_MIDDLEWARE", RESOLVED_POST_MIDDLEWARE = new core_1.OpaqueToken('ngrx/store/resolved-post-middleware'));
exports_6("REDUCER", REDUCER = new core_1.OpaqueToken('ngrx/store/reducer'));
exports_6("INITIAL_STATE", INITIAL_STATE = new core_1.OpaqueToken('ngrx/store/initial-state'));
dispatcherProvider = core_1.provide(dispatcher_1.Dispatcher, {
useFactory: function () {
return new dispatcher_1.Dispatcher();
}
});
storeProvider = core_1.provide(store_1.Store, {
deps: [dispatcher_1.Dispatcher, store_backend_1.StoreBackend, INITIAL_STATE],
useFactory: function (dispatcher, backend, initialState) {
return new store_1.Store(dispatcher, backend, initialState);
}
});
storeBackendProvider = core_1.provide(store_backend_1.StoreBackend, {
deps: [dispatcher_1.Dispatcher, REDUCER, INITIAL_STATE, RESOLVED_PRE_MIDDLEWARE, RESOLVED_POST_MIDDLEWARE],
useFactory: function (dispatcher, reducer, initialState, preMiddleware, postMiddleware) {
return new store_backend_1.StoreBackend(dispatcher, reducer, initialState, preMiddleware, postMiddleware);
}
});
resolvedPreMiddlewareProvider = core_1.provide(RESOLVED_PRE_MIDDLEWARE, {
deps: [PRE_MIDDLEWARE],
useFactory: function (middleware) {
return utils_1.compose.apply(void 0, middleware);
}
});
resolvedPostMiddlewareProvider = core_1.provide(RESOLVED_POST_MIDDLEWARE, {
deps: [POST_MIDDLEWARE],
useFactory: function (middleware) {
return utils_1.compose.apply(void 0, middleware);
}
});
}
}
});
System.register("@ngrx/store", ["store", "utils", "dispatcher", "store-backend", "ng2"], function(exports_7, context_7) {
"use strict";
var __moduleName = context_7 && context_7.id;
function exportStar_1(m) {
var exports = {};
for(var n in m) {
if (n !== "default") exports[n] = m[n];
}
exports_7(exports);
}
return {
setters:[
function (store_2_1) {
exportStar_1(store_2_1);
},
function (utils_2_1) {
exportStar_1(utils_2_1);
},
function (dispatcher_2_1) {
exportStar_1(dispatcher_2_1);
},
function (store_backend_2_1) {
exportStar_1(store_backend_2_1);
},
function (ng2_1_1) {
exportStar_1(ng2_1_1);
}],
execute: function() {
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment