jrwebdev’s gists

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-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-output-bindings.js

Last active November 16, 2016 05:46

Angular 1 vs Angular 2 Output Bindings

	// Angular 1
	const module = angular.module('myModule', []);
	module.component('myComponent', {
	bindings: {
	buttonClick: '&'
	},
	controller() {
	this.clickCount = 0;
	this.onButtonClick = () => {
	this.buttonClick({clicks: ++this.clickCount});

jrwebdev / angular1-v-angular2-component-dependency-injection.js

Last active November 16, 2016 05:48

Angular 1 vs Angular 2 Component Dependency Injection

	// Angular 1
	import NumberService from './path/to/number-service';

	const module = angular.module('myModule', []);
	module.service('NumberService', () => NumberService);
	module.component('myComponent', {
	controller: ['NumberService', function (numberService) {
	this.value = numberService.random(1, 100);
	},
	template: `

jrwebdev / angular1-v-angular2-ngmodel.js

Last active November 14, 2016 04:02

Angular 1 vs Angular 2 ngModel

	// Angular 1
	const module = angular.module('myModule', []);
	module.component('myComponent', {
	template: `
	<label for="name">Your Name</label>
	<input id="name" name="name" ng-model="$ctrl.name" />
	`
	});

	/***************************************************************/

jrwebdev / angular1-v-angular2-form-validation.js

Created November 14, 2016 04:55

Angular 1 vs Angular 2 Form Validation

	// Angular 1
	const module = angular.module('myModule', []);
	module.component('myComponent', {
	template: `
	<form name="myForm">
	<label for="name">Your Name</label>
	<input id="name" name="name" ng-model="$ctrl.name" required />
	<div ng-if="myForm.name.$error">Name is Required</div>
	</form>
	`

jrwebdev / angular1-filters-v-angular2-pipes.js

Created November 14, 2016 07:00

Angular 1 Filters vs Angular 2 Pipes

	// Angular 1
	const module = angular.module('myModule', []);
	module.filter('kebabCase', () => (input) => input.toLowerCase().replace(' ', '-'));

	/***************************************************************/

	// Angular 2
	import {Pipe, PipeTransform} from '@angular/core';

	@Pipe({name: 'kebabCase'})

jrwebdev / angular1-filters-v-angular2-modules.js

Last active November 14, 2016 07:58

Angular 1 vs Angular 2 Modules

	// Angular 1
	const module = angular.module('myModule', [ModuleB, ModuleC]);
	module.component('myComponent', MyComponent);
	module.service('myService', MyService);

	/***************************************************************/

	// Angular 2
	import { NgModule } from '@angular/core';

jrwebdev / angular1-filters-v-angular2-services.js

Created November 15, 2016 00:14

Angular 1 vs Angular 2 Services

	// Angular 1
	const module = angular.module('myModule', []);
	module.service('UserService', ['$http', function ($http) {

	this.getUsers = () => {
	// Code to retrieve users here
	}

	}]);

jrwebdev / angular1-filters-v-angular2-factories-values.js

Created November 15, 2016 00:23

Angular 1 vs Angular 2 Factories and Values

	// Angular 1
	const module = angular.module('myModule', []);
	module.service('MyService', MyService);
	module.factory('MyFactory', MyFactory);
	module.value('MyValue', MyValue);

	/***************************************************************/

	// Angular 2
	import { NgModule } from '@angular/core';

James Ravenscroft jrwebdev