Skip to content

Instantly share code, notes, and snippets.

View jrwebdev's full-sized avatar

James Ravenscroft jrwebdev

  • Auckland, New Zealand
View GitHub Profile
@jrwebdev
jrwebdev / toggle.directive.js
Last active May 17, 2016 06:54
Angular Toggle Directive
const module = angular.module('toggle', []);
module.directive('toggle', function () {
return {
controllerAs: 'toggle',
bindToController: {
value: '=',
trueLabel: '@',
falseLabel: '@',
onToggle: '&'
@jrwebdev
jrwebdev / toggle.directive.js
Last active May 17, 2016 06:53
ngReact Toggle Component
const module = angular.module('toggle', ['react']);
const Toggle = (props) => (
<div onClick={() => props.onToggle(!props.value)}>
<span className={props.value ? 'selected' : ''}>
{props.trueLabel || 'Yes'}
</span>
<span className={!props.value ? 'selected' : ''}>
{props.falseLabel || 'No'}
</span>
@jrwebdev
jrwebdev / usage.html
Created May 14, 2016 11:54
= Bindings
<toggle value="value"
true-label="'True'"
false-label="'False'"
on-toggle="::onToggle">
</toggle>
@jrwebdev
jrwebdev / toggle.directive.js
Last active May 17, 2016 06:58
ngReact wrapper directive
const module = angular.module('toggle', ['react']);
const Toggle = (props) => (
<div onClick={() => props.onToggle(!props.value)}>
<span className={props.value ? 'selected' : ''}>
{props.trueLabel || 'Yes'}
</span>
<span className={!props.value ? 'selected' : ''}>
{props.falseLabel || 'No'}
</span>
@jrwebdev
jrwebdev / container.js
Last active May 17, 2016 11:04
ngReact + Redux
app.directive('myComponent', ['reactDirective', '$ngRedux', function(reactDirective, $ngRedux) {
return reactDirective(MyComponent, null, {}, {store: $ngRedux});
}]);
@jrwebdev
jrwebdev / actions.js
Last active May 19, 2016 08:09
ng-redux-route React wrapper
import {setLocation} from 'ng-redux-router';
const push = url => setLocation(url);
export {push}
@jrwebdev
jrwebdev / actions.js
Last active May 19, 2016 08:32
redux-ui-router React wrapper
import {stateGo} from 'redux-ui-router';
const stateMap = {
'/': 'index',
'/page1': 'page1',
'/page2': 'page2'
}
const push = url => {
// getPath() and getParams() are example functions
@jrwebdev
jrwebdev / app.js
Last active May 19, 2016 10:14
Angular UI Router
$stateProvider.state('a-state', {
url: "/a-url",
template: '<a-react-container></a-react-container>'
})
@jrwebdev
jrwebdev / angular1-v-angular2-component-naming.js
Last active November 13, 2016 08:34
Angular 1 vs 2 Component Naming
// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
template: '<div>Hello World!</div>'
});
/***************************************************************/
// Angular 2
import {Component} from '@angular/core';
@jrwebdev
jrwebdev / angular1-v-angular2-component-template-url.js
Created November 13, 2016 08:37
Angular 1 vs 2 Component Template URL
// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
templateUrl: 'path/to/my/template.html'
});
/***************************************************************/
// Angular 2
import {Component} from '@angular/core';