understanding angular meteor
TRANSCRIPT
Understanding Angular-Meteor
Ashish@ashish_fagna
Client Server
MiniMongo
Node.js Javascript
Validate & Update Simulate DB
Subscribe
JSON EJSON
Publish
Database Everywhere
Data on the wire
Latency Compensation
Validate & UpdatePersist DB
MongoDB
One Language
DDPBrowser Javascript
Full Stack Reactivity
Simplicity = Productivity
Embrace the Ecosystem
7 Core Principles
Meteor Core Projects
Meteor has six core projects in their reactive isomorphic platform.
Angular Meteor adds a simple way to augment or replace the Blaze reactive template library.
urigo:angular most active
➔ 6K+ app installs and 50+ stars
➔ Community around package adding support for migrating to Angular 2
➔ Recently added Angular Server
$meteor.collection Service wrapper for reactive collections.
$meteor.object Service wrapper for one reactive object.
$meteor.subscribe Service wrapper for Meteor.subscribe and Meteor.publish that returns a promise.
$meteor.call Service wrapper to call Meteor.methods and return promises.
$scope.getReactively Method to reactively watch a $scope variable.
meteor-include Directive to include Meteor Blaze templates.
Angular-Meteor API
3 Way binding
template
<div ng-app=”app” ng-controller=”MyCtrl”>
<div ng-repeat=”party in parties”>
{{party.name}}
</div>
</div>
controller.js
app.controller(‘MyCtrl’, function($scope, $someService)
{
$scope.parties = $someService(Parties);
});
3 Way binding - collection
template.tpl
<div ng-app=”app” ng-controller=”MyCtrl”>
<div ng-repeat=”party in parties”>
{{party.name}}
</div>
</div>
controller.js
app.controller(‘MyCtrl’, function($scope, $meteorCollection) {
$scope.parties = $meteorCollection(Parties);
});
Collections Data
Shared JS file
Parties = new Mongo.Collection("parties");
Client
return Parties.find({});
Server
return Parties.find({});
SecurityAccounts packagesCollection permissions
Parties.allow({ insert: function (userId, party) { return userId && party.owner === userId; }, update: function (userId, party, fields, modifier) { if (userId !== party.owner) return false; return true; }, remove: function (userId, party) { if (userId !== party.owner) return false; return true; }});
angular-meteor
● Put everything in scope● Collections<->$scope 3 way binding - smart observe● Services for subscribe, methods, user and reactive data
3 Way binding - object
template.tpl
<div ng-app=”app” ng-controller=”MyCtrl”>
<input ng-model=”party.name”>
<input ng-model=”party.desc”>
</div>
controller.js
app.controller(‘MyCtrl’, function($scope, $meteorObject, $stateParams) {
$scope.party = $meteorObject(Parties, $stateParams.id);
});
angular-meteor - smart observe● Using Meteor cursor to change only the specific
element that changes in the server
● Doing the same when watching the AngularJS array in the client
Subscribe - with promisescontroller.js
app.controller(‘MyCtrl’, function($scope, $meteorSubscribe, $meteorCollection) {
$meteorSubscribe(“parties”).then(function(handle){
$scope.parties = $meteorCollection(Parties);
handle.stop();
});
});
app.controller(‘MyCtrl’, function($scope, $meteorCollection) {
$scope.parties = $meteorCollection(Parties).subscribe(“parties”);
});
Methods - with promisescontroller.js
app.controller(‘MyCtrl’, function($scope, $meteorMethods) {
$meteorMethods.call(“sendEmail”, “[email protected]”).then(
function(data){
console.log(‘success sending email’, data);
}, function(error){
console.log(‘error sending email’, data);
}
)
});
Data Syncing between Angular & Meteor
Data Sync Solution
Data Sync Solution
Thank You