Understanding angular meteor

Understanding angular meteor

• 1.
  Understanding Angular- Meteor Ashish @ashish_fagna
• 2.
  Client Server MiniMongo Node.js Javascript Validate &Update Simulate DB Subscribe JSON EJSON Publish Database Everywhere Data on the wire Latency Compensation Validate & Update Persist DB MongoDB One Language DDPBrowser Javascript Full Stack Reactivity Simplicity = Productivity Embrace the Ecosystem 7 Core Principles
• 3.
  Meteor Core Projects Meteorhas six core projects in their reactive isomorphic platform. Angular Meteor adds a simple way to augment or replace the Blaze reactive template library.
• 5.
  urigo:angular most active ➔6K+ app installs and 50+ stars ➔ Community around package adding support for migrating to Angular 2 ➔ Recently added Angular Server
• 6.
  $meteor.collection Service wrapperfor 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
• 7.
  3 Way binding template <divng-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); });
• 8.
  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); });
• 9.
  Collections Data Shared JSfile Parties = new Mongo.Collection("parties"); Client return Parties.find({}); Server return Parties.find({});
• 10.
  Security Accounts packages Collection 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; } });
• 11.
  angular-meteor ● Put everythingin scope ● Collections<->$scope 3 way binding - smart observe ● Services for subscribe, methods, user and reactive data
• 12.
  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); });
• 13.
  angular-meteor - smartobserve ● 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
• 14.
  Subscribe - withpromises controller.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”); });
• 15.
  Methods - withpromises controller.js app.controller(‘MyCtrl’, function($scope, $meteorMethods) { $meteorMethods.call(“sendEmail”, “no@yes.com”).then( function(data){ console.log(‘success sending email’, data); }, function(error){ console.log(‘error sending email’, data); } ) });
• 16.
  Data Syncing between Angular& Meteor
• 17.
  Data Sync Solution
• 18.
  Data Sync Solution
• 19.
  Thank You