Super excited about Angular? Ready to change the world and build a super-heroic app? With directives, Angular has pretty much nailed it when it comes to interacting with the DOM. And plain-old Javascript objects as models? AWESOME! Wait, hang on. Say that you're building a app that has lots of business logic and interrelated data. For that sort of app, history shows us that a rich object model can often be the best place to put your logic and data relationships - from both a testing and ease-of-development perspective. That's the approach that frameworks like Ember advocate - but Ember forces you to extend on its own object model. In this talk I'll ask whether we can get the best of both worlds - a rich data model, whilst still using plain-old Javascript objects. We'll delve into things like: - Lazy-loading data relationships between models - Decorating loaded data with business logic - Object identity uniqueness (critical for bindings to work as expected) - Computed properties for models Attendees will leave with an understanding of how a rich object model can help them build beautiful, fast and easy-to-maintain apps.

1. Rich Object Models &
Angular
Ben Teese, Shine Technologies

2. Overview
Why?
Loading Data
Adding Business Logic
Advanced Stuff

3. Most of the apps I build are
CRUD

4. ...it was nice

5. WARNING
The remainder of this presentation
contains UX that some viewers may find
disturbing

7. Proposal
Internal
Currency
NonRecurring
Engineering
External
Currency
Customer
Shipsets
External
Cost Items
Material
Cost Items
Internal
Cost Items
Customer
Type
Cost
Cost
Department
Sales Price
Override
Currency
Currency
OMG
Recurring
Engineering
Details
Years
Line
Replaceable
Unit
Currency
Customer
Type Prices
External Cost
Items
Internal Cost
Item
Subassemblies
Standard
Sales Price
Spare Parts
Sales Price
Customer
Type
Cost
Department
Supplier
Purchase Price
Ranges
Currency
Sales Price
Currency
Currency
Currency
Purchase Price
Currency

10. Restangular

11. Getting Stuff
// GET /proposals
Restangular.all('proposals').getList().then(
function(proposals) {
$scope.proposals = proposals;
}
);

12. or...
// GET /proposals
$scope.proposals =
Restangular.all('proposals').getList().
$object;

13. Getting Nested Stuff
// GET /proposals/:id/cost_items
$scope.proposal.getList('cost_items').then(
function(costItems) {
$scope.costItems = costItems;
}
);

14. Rich Models

15. angular.module('pimpMyPlane.services', ['restangular']).
factory('ProposalSvc', function(Restangular) {
Restangular.extendModel('proposals', function(obj) {
return angular.extend(obj, {!
profit: function() {
return this.revenue().minus(this.cost());
},
revenue: function() {
return this.price().
convertTo(this.internalCurrency);
}
...
});
});
return Restangular.all('proposals');
})

16. A Model Mixin
angular.module('pimpMyPlane.models').
factory('Proposal', function() {
return {
profit: function() {
return this.revenue().minus(this.cost());
},
revenue: function() {
return this.price().
convertTo(this.internalCurrency);
},
...
};
}

17. Using the Mixin
angular.module('pimpMyPlane.services',
['restangular', 'pimpMyPlane.models']
).factory('ProposalSvc', function(Restangular, Proposal){
Restangular.extendModel('proposals', function(obj) {
return angular.extend(obj, Proposal);
});
return Restangular.all('proposals');
});

18. What about nested models?
angular.module('pimpMyPlane.services', ['restangular']).
factory('ProposalSvc', function(Restangular) {
Restangular.extendModel('proposals', function(obj) {
angular.extend(obj.recurringEngineering, {
...
});
angular.extend(obj.nonRecurringEngineering, {
...
});
angular.extend(obj.internalCurrency, { ... });
angular.extend(obj.externalCurrency, { ... });
return angular.extend(obj, Proposal);
});
...
})

19. Introduce mixInto()
angular.module('pimpMyPlane.services',
['restangular', 'pimpMyPlane.models']
).
factory('Proposals', function(Restangular, Proposal) {
Restangular.extendModel('proposals', function(obj) {
return Proposal.mixInto(obj);
});
...
});

20. angular.module('pimpMyPlane.models').
factory('Proposal', function(
Currency, RecurringEngineering, NonRecurringEngineering
) {
return {
mixInto: function(obj) {
RecurringEngineering.mixInto(
obj.recurringEngineering
);
NonRecurringEngineering.mixInto(
obj.nonRecurringEngineering
);
Currency.mixInto(obj.internalCurrency);
Currency.mixInto(obj.externalCurrency))
return angular.extend(obj, this);
},
profit: function() {
return this.revenue().minus(this.cost());
},
...
};
});

21. Proposal
Internal
Currency
NonRecurring
Engineering
External
Currency
Customer
Recurring
Engineering
Shipsets
External
Cost Items
Material
Cost Items
Internal
Cost Items
Customer
Type
Cost
Cost
Department
Sales Price
Override
Currency
Currency
Details
Years
Line
Replaceable
Unit
Currency
Customer
Type Prices
External Cost
Items
Internal Cost
Item
Subassemblies
Standard
Sales Price
Spare Parts
Sales Price
Customer
Type
Cost
Department
Supplier
Purchase Price
Ranges
Currency
Sales Price
Currency
Currency
Currency
Purchase Price
Currency

22. Shazam

23. Identity Maps

24. Proposal
Internal
Currency
NonRecurring
Engineering
External
Currency
Customer
Recurring
Engineering
Shipsets
External
Cost Items
Material
Cost Items
Internal
Cost Items
Customer
Type
Cost
Cost
Department
Sales Price
Override
Currency
Currency
Details
Years
Line
Replaceable
Unit
Currency
Customer
Type Prices
External Cost
Items
Internal Cost
Item
Subassemblies
Standard
Sales Price
Spare Parts
Sales Price
Customer
Type
Cost
Department
Supplier
Purchase Price
Ranges
Currency
Sales Price
Currency
Currency
Currency
Purchase Price
Currency

25. Identity Map
“currency”:1
EUR
“currency”:2
...
USD
...
“department”:1
Finance
“department”:2
IT
...
...

27. Mapping Nested Currencies
angular.module('pimpMyPlane.models').
factory('Money', function(Currency, identityMap) {
return {
mixInto: function(obj) {
obj.currency = identityMap(
'currency',
Currency.mixInto(obj.currency)
);
angular.extend(object, this);
},
...
});

28. Mapping RESTful Currencies
angular.module('pimpMyPlane.services',
['restangular', 'pimpMyPlane.models']
).factory('CurrenciesSvc', function(
Restangular, Currency, identityMap
) {
Restangular.extendModel('currencies', function(obj){
return identityMap(
'currency', Currency.mixInto(obj)
);
});
return Restangular.all('currencies');
});

29. Getter Functions
(Uniform Access Principle)

30. angular.module('pimpMyPlane.models').
factory('Proposal', function(extendWithGetters) {
return {
mixInto: function(obj) {
...
return extendWithGetters(obj, this);
},
get profit() {
return this.revenue.minus(this.cost);
},
get revenue() {
return this.price.convertTo(
this.internalCurrency
);
},
...
};
}
);

31. Memoization

32. angular.module('pimpMyPlane.models').
factory('Proposal', function(Model) {
return Model.extend({
memoize: ['revenue', 'cost'],
...
get profit() {
return this.revenue.minus(this.cost);
},
get revenue() {
return this.price.convertTo(
this.internalCurrency
);
},
...
};
}
);

33. Unmemoization
<div ng-controller="ProposalCtrl">
...
<input type="number"
ng-model="currency.conversionFactor"
ng-change="proposal.unmemoize()"></input>
...
<table>
<tr>
<td>Number of Aircraft</td>
<td>
<input type="number" min="1"
ng-model="proposal.numberOfAircraft"
ng-change="proposal.unmemoize()"></input>
</td>
</tr>
</table>
</div>

34. Computed Properties

35. angular.module('pimpMyPlane.models').
factory('Proposal', function(...) {
return Model.extend({
...
computedProperties: {
profit: [function() {
return this.revenue.minus(this.cost);
}, 'revenue', 'cost'],
cost: [function() {
return this.recurringEngineering.cost.plus(
this.nonRecurringEngineering.cost
);
}, 'recurringEngineering.cost',
'nonRecurringEngineering.cost']
},
});
});

36. ...needs more work

37. Let’s Wrap This Up
Shrink-wrapped
Boeing 737
Rich Models can work
Identity Maps
Getters, Memoization
Computed properties

38. Please enjoy the remainder of your flight
@benteese