James Ravenscroft jrwebdev

jrwebdev / angular1-v-angular2-component-input-bindings.js

Last active November 16, 2016 05:47

Angular 1 vs Angular 2 Input Bindings

	// Angular 1
	const module = angular.module('myModule', []);
	module.component('myComponent', {
	bindings: {
	name: '@', // String binding
	age: '<', // One-way binding
	color: '@favouriteColor' // Renamed string binding
	},
	controller() {
	this.name = this.name \|\| 'User'; // Default value

jrwebdev / angular1-v-angular2-component-properties-methods.js

Created November 13, 2016 08:45

Angular 1 vs Angular 2 Component Properties & Methods

	// Angular 1
	const module = angular.module('myModule', []);
	module.component('myComponent', {
	controller() {
	this.message = 'Hello World!';
	this.sayHello = () => {
	alert('Hello World!');
	};
	},
	template: '<div ng-click="$ctrl.sayHello()">{{$ctrl.message}}</div>'

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';

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 / 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 / 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 / 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 / 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 / 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 / usage.html

Created May 14, 2016 11:54

= Bindings