Skip to content

Instantly share code, notes, and snippets.

View TheLarkInn's full-sized avatar
🦀
Getting Rusty

Sean Larkin TheLarkInn

🦀
Getting Rusty
6.5k followers · 71 following
View GitHub Profile
@TheLarkInn
TheLarkInn / index.ts
Created May 11, 2016 17:01
import {provide, PLATFORM_DIRECTIVES, PLATFORM_PIPES} from '@angular/core';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
import {FORM_PROVIDERS} from '@angular/common';
import {HTTP_PROVIDERS, JSONP_PROVIDERS} from '@angular/http';
import {ELEMENT_PROBE_PROVIDERS /*,ELEMENT_PROBE_PROVIDERS_PROD_MODE*/} from '@angular/platform-browser';
import {LocationStrategy, HashLocationStrategy, Location} from '@angular/common';
/*
Add custom env providers here.
@TheLarkInn
TheLarkInn / add_event_listener_using_this_dot_manager.ts
Last active April 24, 2016 16:01
A more successful way to implement the addEventListener function for Multiple events bindings.
addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
var zone = this.manager.getZone();
var eventsArray = this.getMultiEventArray(eventName);
// Entering back into angular to trigger changeDetection
var outsideHandler = (event) => {
zone.run(() => handler(event))
};
// Executed outside of angular so that change detection is not constantly triggered.
@TheLarkInn
TheLarkInn / add_event_listener_for_manager_plugin_failed_version
Created April 24, 2016 15:53
First attempt at implementation.
addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
var zone = this.manager.getZone();
var eventsArray = this.getMultiEventArray(eventName);
// Entering back into angular to trigger changeDetection
var outsideHandler = (event) => {
zone.run(() => handler(event))
};
// Executed outside of angular so that change detection is not constantly triggered.
@TheLarkInn
TheLarkInn / implementing_the_supports_function.ts
Created April 24, 2016 15:24
My implementation of the supports() function for our custom event.
getMultiEventArray(eventName: string): string[] {
return eventName.split(",")
.filter((item, index): boolean => { return item && item != '' })
}
supports(eventName: string): boolean {
return this.getMultiEventArray(eventName).length > 1
}
@TheLarkInn
TheLarkInn / event_manager.d.ts
Created April 24, 2016 15:03
An empty EventManagerPlugin extension, accompanied by the EventManagerPlugins definition file so we can see how to implement it.
import { OpaqueToken } from 'angular2/src/core/di';
import { NgZone } from 'angular2/src/core/zone/ng_zone';
export declare const EVENT_MANAGER_PLUGINS: OpaqueToken;
export declare class EventManager {
private _zone;
private _plugins;
constructor(plugins: EventManagerPlugin[], _zone: NgZone);
addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
addGlobalEventListener(target: string, eventName: string, handler: Function): Function;
getZone(): NgZone;
@TheLarkInn
TheLarkInn / event_manager_finding_plugins.ts
Created April 24, 2016 14:52
A closer look at event_managers method for searching though its plugins to find valid eventplugins using the implemented supports() function.
addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
var plugin = this._findPluginFor(eventName);
return plugin.addEventListener(element, eventName, handler);
}
addGlobalEventListener(target: string, eventName: string, handler: Function): Function {
var plugin = this._findPluginFor(eventName);
return plugin.addGlobalEventListener(target, eventName, handler);
}
@TheLarkInn
TheLarkInn / dom_renderer_partial.ts
Created April 24, 2016 14:46
The listen and listenGlobal functions which call eventManager for listening to events.
listen(renderElement: any, name: string, callback: Function): Function {
return this._rootRenderer.eventManager.addEventListener(renderElement, name,
decoratePreventDefault(callback));
}
listenGlobal(target: string, name: string, callback: Function): Function {
return this._rootRenderer.eventManager.addGlobalEventListener(target, name,
decoratePreventDefault(callback));
}
@TheLarkInn
TheLarkInn / event_manager.ts
Created April 24, 2016 14:42
EventManagerPlugin class found in 'angular2/platform/dom/events'
import {CONST_EXPR} from 'angular2/src/facade/lang';
import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
import {Injectable, Inject, OpaqueToken} from 'angular2/src/core/di';
import {NgZone} from 'angular2/src/core/zone/ng_zone';
import {ListWrapper} from 'angular2/src/facade/collection';
export const EVENT_MANAGER_PLUGINS: OpaqueToken =
CONST_EXPR(new OpaqueToken("EventManagerPlugins"));
@Injectable()
@TheLarkInn
TheLarkInn / importingProvidersIntoYourAppViaBootstrap.ts
Created April 22, 2016 20:30
How to include providers custom and app providers in bootstrap function. Angular2
import {bootstrap} from 'angular2/platform/browser';
import {DIRECTIVES, PIPES, PROVIDERS, ENV_PROVIDERS, PLUGINS} from './platform/browser';
import {App, APP_PROVIDERS} from './app';
bootstrap(App, [
...PROVIDERS,
...ENV_PROVIDERS,
...DIRECTIVES,
...PIPES,
...APP_PROVIDERS,
@TheLarkInn
TheLarkInn / bootStrapItNow.ts
Last active November 30, 2016 16:00
How to bundle up custom plugins with EVENT_MANAGER_PLGUINS
import {bootstrap} from 'angular2/platform/browser';
import {DIRECTIVES, PIPES, PROVIDERS, ENV_PROVIDERS, PLUGINS} from './platform/browser';
import {App, APP_PROVIDERS} from './app';
bootstrap(App, [
...PROVIDERS,
...ENV_PROVIDERS,
...DIRECTIVES,
...PIPES,
...APP_PROVIDERS,