The document discusses data models in Angular 1 and 2. It covers existing solutions for network requests and data access layers, including $http, $resource, and libraries like Restangular. It emphasizes that the data access layer should be separated from controllers and handle data transformation and caching. Other topics include working offline, binding data to scopes, and the goals for data handling in Angular 2, such as less boilerplate and supporting existing libraries.
1. Data Models inData Models in
Angular 1 & 2Angular 1 & 2
Adam Klein
CTO @ 500Tech
2. UsUs
AngularJS consulting, development, team building
AngularJS-IL Community on meetup.com
helped with ng-conf
Pssst....
AngularJS Course - 20.5
We're looking for experienced
NodeJS developers
AngularJS developers
3. Data models in AngularData models in Angular
There's no such thing
Angular focuses on VC
You have a service - do whatever
you want with it
?
4. What's the big deal?What's the big deal?
Unreliable Data
partial
incomplete
stale
Live in a browser
your app keeps restarting
it might be opened in
parallel
it has limited resources
JSON server
sync & async mixed
flakiness
no standard
Angular
bindable
5.
6.
7. Data Access != Network AccessData Access != Network Access
Network Layer
routes & parameters
RESTFul APIs
interceptors
http headers
Web Sockets
Data Access Layer (DAL)
data transformation
persisting
caching
access methods
aggregation
11. $resource$resource
1 file, 661 lines of code
built-in to angular
Network:
RESTFul routes
Path & Params building
Interceptors
Data:
Prototypes
Bindable to template
12. RestangularRestangular
A better version of $resource
5794 stars on github
1 file with 1351 lines of code
Maintained by one Argentian guy
A bit more complex and
configurable
21. Working 'offline'Working 'offline'
Don't wait for server
Better UX
when user owns data
editors
Don't allow inputting wrong data
Indications to user
Synchronisation problems
25. Possible solution?Possible solution?
Controller:
this.data = DataService;
$interval(() => {
DataService.query();
}, 2000);
Template:
<div>
{{ Ctrl.data.items.length }} bottles of beer on the wall,<br>
{{ Ctrl.data.items.length }} bottles of beer<br>
if one of the bottles should happen to fall....<br><br>
{{ Ctrl.data.items.length - 1 }} bottles of beer on the wall!
</div>
26. Don't couple view with DAODon't couple view with DAO
Use angular.copy
constructor() {
this._beerBottlesData = [];
}
query() {
return this.$http('beer_bottles')
.then((bottles) => {
angular.copy(bottles, this._beerBottlesData);
return this._beerBottlesData;
});
}
getList() {
return this._beerBottlesData;
}
47. "We want to make API more"We want to make API more
intuitive"intuitive"
How you do http short polling
var beerBottles = Rx.Observable.interval(60 * 2000).
map(() => 'http://beerfactory.com/api/beer_bottles').
flatMapLatest(http).
subscribe()
48.
49. Thank youThank you
Adam Klein
500Tech.com
meetup.com/angularjs-il
hackademy.co.il
github.com/adamkleingit
https://twitter.com/500techil