jrwebdev’s gists

jrwebdev / angular1-filters-v-angular2-built-in-directives.js

Last active November 16, 2016 05:20

Angular 1 vs Angular 2 Built-in Directives

	// Angular 1
	const module = angular.module('myModule', []);
	module.component('myComponent', {
	template: `
	<div
	ng-if="$ctrl.isShown"
	ng-click="$ctrl.onClick($event)"
	ng-class="{blue: $ctrl.isBlue}">

	Hello World!

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

Last active November 15, 2016 01:23

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

	this.getUsers = () => {
	return $http.get('http://api.mywebsite.com/users')
	.then(res => res.data)
	.catch(res => new Error(res.data.error));
	}

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

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-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-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-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-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-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-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});

James Ravenscroft jrwebdev