angular classy
DESCRIPTION
A brief 10 minute overview of Angular Classy and a look towards some of the new features in 0.5.TRANSCRIPT
Dave Jeffery @DaveJ
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
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>
• 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>
Clean & DRYapp.controller('AppCtrl', ['$scope', '$location', '$http', function($scope, $location, $http) { // ... }]);
app.classy.controller({ name: 'AppCtrl', inject: ['$scope', '$location', '$http'], //... });
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);
Classy $watch
watch: { 'firstName': fn1, '{object}blogPosts': fn2, '{collection}todos': fn3 }
Classy
Classy $watch
watch: { 'firstName': fn1, '{object}blogPosts': fn2, '{collection}todos': fn3 }
watch: { 'firstName': fn1, '{deep}blogPosts': fn2, '{shallow}todos': fn3 }
Classy
Reverse-reference Controllers
<!-- In your HTML --> <div id="footer" ng-controller="FooterCtrl"></div>
!// In your JS app.classy.controller({ name: 'FooterCtrl', //... });
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
What’s coming in 0.5
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
Computed Properties
<!—- In your html —-><input<input<div
!// In your JScomputed fullName } }
Classy
0.5
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
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
http://davej.github.io/angular-classy/or just google “Angular Classy”
or talk to me afterwards