This document summarizes Angular Classy, a library that adds structure and organization to Angular controllers. It discusses how Classy controllers can be cleaner and more maintainable than vanilla Angular controllers. Key features of Classy covered include declaring controllers as classes, simplified $watch syntax, reverse referencing controllers by element ID, and upcoming features like computed properties and plugins.

1. Dave Jeffery
@DaveJ

2. 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

3. 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>

4. • 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>

6. Clean & DRY
app.controller('AppCtrl',
['$scope', '$location', '$http',
function($scope, $location, $http) {
// ...
}]);
app.classy.controller({
name: 'AppCtrl',
inject: ['$scope', '$location', '$http'],
//...
});
Classy

8. $WATch
• Watching primitives
• Watching an object
• Watching a collection (shallow object)
$scope.$watch('firstName', fn);
$scope.$watch('blogPosts', fn, true);
$scope.$watchCollection('todos', fn);

9. Classy $watch
watch: {
'firstName': fn1,
'{object}blogPosts': fn2,
'{collection}todos': fn3
}
Classy

10. Classy $watch
watch: {
'firstName': fn1,
'{object}blogPosts': fn2,
'{collection}todos': fn3
}
watch: {
'firstName': fn1,
'{deep}blogPosts': fn2,
'{shallow}todos': fn3
}
Classy

11. Reverse-reference Controllers
<!-- In your HTML -->
<div id="footer" ng-controller="FooterCtrl"></div>
!
// In your JS
app.classy.controller({
name: 'FooterCtrl',
//...
});
Classy

12. 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

13. What’s coming in 0.5

14. 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

15. Computed Properties
<!—- In your html —->
<input
<input
<div
!
// In your JS
computed
fullName
}
}
Classy
0.5

16. Computed Properties
<!—- In your html —->
<input
<input
<div
!
// In your JS
computed
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

17. 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

18. http://davej.github.io/angular-classy/
or just google “Angular Classy”
or talk to me afterwards