data models in angular 1 & 2
TRANSCRIPT
![Page 1: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/1.jpg)
Data Models inData Models inAngular 1 & 2Angular 1 & 2Adam KleinCTO @ 500Tech
![Page 2: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/2.jpg)
UsUsAngularJS consulting, development, team buildingAngularJS-IL Community on meetup.comhelped with ng-conf Pssst.... AngularJS Course - 20.5We're looking for experienced
NodeJS developersAngularJS developers
![Page 3: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/3.jpg)
Data models in AngularData models in AngularThere's no such thingAngular focuses on VCYou have a service - do whateveryou want with it
?
![Page 4: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/4.jpg)
What's the big deal?What's the big deal?Unreliable Data
partialincomplete stale
Live in a browser
your app keeps restartingit might be opened inparallelit has limited resources
JSON server
sync & async mixed flakinessno standard
Angular
bindable
![Page 5: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/5.jpg)
![Page 6: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/6.jpg)
![Page 7: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/7.jpg)
Data Access != Network AccessData Access != Network Access
Network Layer
routes & parametersRESTFul APIsinterceptorshttp headersWeb Sockets
Data Access Layer (DAL)
data transformationpersistingcachingaccess methodsaggregation
![Page 8: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/8.jpg)
Existing solutionsExisting solutions
![Page 9: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/9.jpg)
NetworkNetwork
![Page 10: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/10.jpg)
$http$resource
RestangularOtherlibraries
![Page 11: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/11.jpg)
$resource$resource1 file, 661 lines of codebuilt-in to angularNetwork:
RESTFul routesPath & Params buildingInterceptors
Data:PrototypesBindable to template
![Page 12: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/12.jpg)
RestangularRestangularA better version of $resource5794 stars on github1 file with 1351 lines of codeMaintained by one Argentian guyA bit more complex andconfigurable
![Page 13: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/13.jpg)
Doesn't matterDoesn't matterJust wrap it in a serviceJust wrap it in a service
![Page 14: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/14.jpg)
Data AccessData AccessA.K.A.A.K.A.DALDALDAODAO
ModelModelDataServiceDataService
![Page 15: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/15.jpg)
BreezeJS-data-angular
BackboneModel
Your own
Ember Data
![Page 16: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/16.jpg)
Todo MVCTodo MVC
![Page 17: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/17.jpg)
Who owns the data?Who owns the data?class TodoController { createTodo(todo) { todo.completed = false; this.TodoService.post(todo).then((todo) => { this.todos.push(todo); }); }}
class TodoService { post(todo) { return this.$http.post('/todos', todo); }}
![Page 18: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/18.jpg)
DAO is in charge ofDAO is in charge ofdatadata
Controller is in charge ofController is in charge ofview stateview state
![Page 19: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/19.jpg)
BetterBetterclass TodoController { createTodo(todo) { this.saving = true; this.TodoService.add(todo).then(() => { this.saving = false; }); }}
class TodoService { add(todo) { todo.completed = false; return this.$http.post('/todos', todo) .then((todo) => { this.todos.push(todo)); return todo; }); }}
![Page 20: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/20.jpg)
OOPOOPclass Todo { constructor() { this.completed = false; } totalTime() { return this.completedAt - this.startedAt; }}
![Page 21: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/21.jpg)
Working 'offline'Working 'offline'
Don't wait for serverBetter UXwhen user owns data editors
Don't allow inputting wrong dataIndications to userSynchronisation problems
![Page 22: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/22.jpg)
Working offlineWorking offline
class TodoStore { create(todo) { this.todos.push(todo); return $http.post('/todos', todo); }}
![Page 23: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/23.jpg)
99 bottles of beer on99 bottles of beer onthe wallthe wall
![Page 24: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/24.jpg)
Bindable to scopeBindable to scopeController: this.beerBottles = DataService.beerBottles; $interval(() => { DataService.query(); }, 2000);
DataService:
this.beerBottles = []; query() { return this.$http.get('/beer_bottles') .then((bottles) => this.beerBottles = bottles); }
![Page 25: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/25.jpg)
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>
![Page 26: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/26.jpg)
Don't couple view with DAODon't couple view with DAOUse 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; }
![Page 27: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/27.jpg)
Code SmellCode Smellclass DataService { constructor($state, $modal, $rootScope) { }}
![Page 28: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/28.jpg)
CachingCachingclass BeerBottlesService { query() { return this.$http('beer_bottles'); }}
![Page 29: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/29.jpg)
CachingCachingconstructor() { this._beerBottles = null;}query() { if (this._beerBottles) { return this._beerBottles; } else { return this.$http('beer_bottles') .then((bottles) => { return this._beerBottles = bottles; }); }}
![Page 30: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/30.jpg)
CachingCachingconstructor() { this._beerBottles = null;}
query() { if (!this._beerBottles) { this._beerBottles = this.$http('beer_bottles'); } return this._beerBottles;}
Cache the promise, not the data
![Page 31: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/31.jpg)
ParameterisedParameterisedcachingcaching
Maintain a hash of promises{ 1: Promise that object 1 will return 2: Promise that object 2 will return ...}
![Page 32: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/32.jpg)
Http CacheHttp CacheSometimes is good enoughURL based, not resource based
![Page 33: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/33.jpg)
TreesTrees
![Page 34: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/34.jpg)
JSON editorJSON editor{ config: { baseUrl: 'http://my.website.com', port: 3000, allowedMethods: ['POST', 'GET'], resources: { users: {access: 'admin'}, posts: {access: 'user'}, pages: {access: 'guest'} } }}
{ name: 'config', type: 'Object', children: [ { name: 'baseUrl', type: 'String', value: 'http://my.website.com' }, { name: 'port', type: 'Integer', value: 3000 }, { name: 'allowedMethods', type: 'Array', value: ['POST', 'GET', 'DELETE'] }, { name: 'resources', type: 'Object', children: [ ... ] } ]}
![Page 35: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/35.jpg)
Same data, different representationsSame data, different representations
![Page 36: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/36.jpg)
js-data-angularjs-data-angularJason Dobry
js-data - 454 starsjs-data-angular - 932 starsDecember 2013started for angular, inspired by ember-data
https://www.youtube.com/watch?v=8wxnnJA9FKw
![Page 37: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/37.jpg)
js-data-angularjs-data-angularbind to controller
identity mapsquery language
sync & asynccomputed properties
prototyping and static methodstotally configurablechange detection
validationscache expiration
framework agnostic (even runs on node)
![Page 38: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/38.jpg)
Angular 2.0Angular 2.0
https://www.youtube.com/watch?v=Bm3eDgZZMFs
https://docs.google.com/document/d/1DMacL7iwjSMPP0ytZfugpU4v0PWUK0BT6lhya
VEmlBQ/edit
https://docs.google.com/document/d/1US9h0ORqBltl71TlEU6s76ix8SUnOLE2jabHVg
9xxEA/edit#heading=h.oisbys59gdxa
![Page 39: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/39.jpg)
What's been doneWhat's been doneA lot of researchCollaboration with other teams
![Page 40: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/40.jpg)
GoalsGoalsNo BoilerplateBYODataWorking with existing libraries authorsDon't dictate behaviourDon't dictate server integrationRecognise different flowsIn other words - a fantasy?
![Page 41: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/41.jpg)
Future of webFuture of webcollaborationcollaboration
realtime datarealtime data
offline workoffline work
![Page 42: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/42.jpg)
PhasesPhases1. Utilities2. Offline3. Rich data
![Page 43: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/43.jpg)
More considerationsMore considerations1. Security2. Bindability3. Performance4. Storage limitations5. Mocking & Testability
![Page 44: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/44.jpg)
Structured FormsStructured Forms
![Page 45: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/45.jpg)
Bindable realtime dataBindable realtime datausing observables and async pipes
// Componentthis.count = http('http://beer.factory/bottles'). map((bottles) => bottles.length)
// Template<span> {{ count | async }} bottles of beer on the wall</span>
![Page 46: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/46.jpg)
Let's finish with aLet's finish with awatwat
![Page 47: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/47.jpg)
"We want to make API more"We want to make API moreintuitive"intuitive"
How you do http short polling
var beerBottles = Rx.Observable.interval(60 * 2000). map(() => 'http://beerfactory.com/api/beer_bottles'). flatMapLatest(http). subscribe()
![Page 48: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/48.jpg)
![Page 49: Data models in Angular 1 & 2](https://reader031.vdocument.in/reader031/viewer/2022030313/58a482961a28ab58738b4f39/html5/thumbnails/49.jpg)
Thank youThank youAdam Klein500Tech.commeetup.com/angularjs-ilhackademy.co.ilgithub.com/adamkleingithttps://twitter.com/500techil