Angular Classy

18
Dave Jeffery @DaveJ

description

A brief 10 minute overview of Angular Classy and a look towards some of the new features in 0.5.

Transcript of Angular Classy

Page 1: Angular Classy

Dave Jeffery @DaveJ

Page 2: Angular Classy

Angular Classy

• Lightweight yet opinionated way to bring more structure and a tea-spoon of sugar to Angular controllers

• Popular-ish• 700 stars on Github

• Has been #1 on Hacker News

Page 3: Angular Classy

Vanilla Angular Controllers• This is a vanilla (non-classy) Angular Controller:

• The controller gets instantiated using the following HTML:

function MyController() { // This is my controller }

<div ng-controller="MyController"></div>

Page 4: Angular Classy

• Simple, un-opinionated and easy to get started

• Eventually gets unwieldy and difficult to maintain

• They are just functions! This makes it easy to build abstractions on top

Vanilla Angular Controllers• This is a vanilla (non-classy) Angular Controller:

• The controller gets instantiated using the following HTML:

function MyController() { // This is my controller }

<div ng-controller="MyController"></div>

Page 5: Angular Classy
Page 6: Angular Classy

Clean & DRYapp.controller('AppCtrl', ['$scope', '$location', '$http', function($scope, $location, $http) { // ... }]);

app.classy.controller({ name: 'AppCtrl', inject: ['$scope', '$location', '$http'], //... });

Classy

Page 7: Angular Classy
Page 8: Angular Classy

$WATch• Watching primitives

• Watching an object

• Watching a collection (shallow object)

$scope.$watch('firstName', fn);

$scope.$watch('blogPosts', fn, true);

$scope.$watchCollection('todos', fn);

Page 9: Angular Classy

Classy $watch

watch: { 'firstName': fn1, '{object}blogPosts': fn2, '{collection}todos': fn3 }

Classy

Page 10: Angular Classy

Classy $watch

watch: { 'firstName': fn1, '{object}blogPosts': fn2, '{collection}todos': fn3 }

watch: { 'firstName': fn1, '{deep}blogPosts': fn2, '{shallow}todos': fn3 }

Classy

Page 11: Angular Classy

Reverse-reference Controllers

<!-- In your HTML --> <div id="footer" ng-controller="FooterCtrl"></div>

!// In your JS app.classy.controller({ name: 'FooterCtrl', //... });

Classy

Page 12: Angular Classy

Reverse-reference Controllers

<!-- In your HTML --> <div id="footer" ng-controller="FooterCtrl"></div>

!// In your JS app.classy.controller({ name: 'FooterCtrl', //... });

<!-- In your HTML --> <div id="footer"></div>

!// In your JS app.classy.controller({ el: '#footer', //... });

Classy

Page 13: Angular Classy

What’s coming in 0.5

Page 14: Angular Classy

Computed Properties

<!—- In your html —-> <input ng-model="firstName"> <input ng-model="lastName"> <div>{{ fullName }}</div>

!// In your JS computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } }

Classy

0.5

Page 15: Angular Classy

Computed Properties

<!—- In your html —-><input<input<div

!// In your JScomputed fullName } }

Classy

0.5

Page 16: Angular Classy

Computed Properties

<!—- In your html —-><input<input<div

!// In your JScomputed fullName } }

Classy

computed: { fullName: { watch: ['firstName', 'lastName'], get: function() { return this.firstName + ' ' + this.lastName; }, set: function(newVal) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } }

0.5

Page 17: Angular Classy

Classy Plugins• New version of Angular Classy will be modular,

making it easy to write your own Classy plugin.

• Some ideas:• Resolve — Wait for a promise to resolve before initialising

• Mixins — Extend or mixin with other Classy controllers

• Events — $scope.$on

• Router — Define routes inline with the relevant controller

var app = angular.module('app', ['classy', 'classy-resolve']);

0.5

Page 18: Angular Classy

http://davej.github.io/angular-classy/or just google “Angular Classy”

or talk to me afterwards