Improves the Parse.com javascript library for automatic data synchronization with AngularJS applications. Similar to how ng-model works, Pang will do the heavylifting of updating the database. All you need to worry about is keeping the front-end data on track.
##Installation Include the Pang module in your html.
<script src="pang.js"></script>Inject the Pang module as a dependency.
angular.module('myApp', ['pang'])
.controller('PangTestCtrl', function($scope, pang) {##Quick Example Yes, it's this easy.
angular.module('myApp', ['pang'])
.controller('TodoCtrl', function($scope, pang) {
//setup
pang.initialize('abcdef...', '123456...'); // initialize Parse and Pang
$scope.todos = pang.Collection('Todo') // get Todo objects
.order('updatedAt') // sort newest on bottom
.where({'completed', false}) // only include not completed todos
.build(); // build collection and fetch objects
$scope.todos.autoSync = true; // automatically sync all objects
// with Parse.com
//add some todos
$scope.todos.push({name: 'Install Pang'});
$scope.todos.push({name: 'Do whatever you want'});
});##Usage First, initialize Parse and Pang at the same time.
pang.initialize(appId, jsKey);Next, build a new Collection with a Parse table.
$scope.objects = pang.Collection(ParseTable).build();The array objects will synchronize with Parse.com when you use these methods:
//add a new object
$scope.objects.add({name: 'Object Name'});
//delete an object
$scope.objects.delete(index);
//update an existing object
$scope.objects.update(object);If you would only like to fetch objects with a certain condition, use where.
$scope.objects = pang.Collection(ParseTable).where({'isAwesome', true}).build();Sort the objects with order.
//ascending
$scope.objects = pang.Collection(ParseTable).order('updatedAt').build();
//descending
$scope.objects = pang.Collection(ParseTable).order('updatedAt', false).build();##Auto Syncing Pang has the capability to detect changes in the collection and automatically update them.
$scope.objects = pang.Collection(ParseTable).setAutoSync(true).build();Use can then use any methods you'd like to change the contents of the collection.
$scope.objects.push({name: 'New Name'});
$scope.objects.splice(index, 2)
$scope.objects[index].name = 'This is a new name';Note that a request to Parse will be sent on every single change. I would recommend not directly using ng-model with object attributes when using AutoSync.
##Permissions
By default Pang will not add an ACL to the objects. You can do this by passing the ACL as an attribute to the add method.
var newAcl
693C
= new Parse.ACL(Parse.User.current());
newAcl.setPublicReadAccess(true);
$scope.objects.add({name: 'New Name', ACL: newAcl});Determine if the current user has write permissions with canWrite.
$scope.objects[index].canWrite##Changing Users
Use pang.User.logIn() and pang.User.logOut() instead of the Parse functions to also update the collections. (if a user logs out, then the private objects will be removed from the collection).
pang.User.logIn(username, password);
pang.User.logOut();##Pointers Pang handles pointers in exactly the same way Parse does. Simply add the pointer like another attribute and Pang will figure it out.
var modelS = pang.Collection('Model').where({'name', 'model-s'}).build()[0];
pang.cars.add({name: 'Tesla', model: modelS});Pang can fetch a Parse object from a pointer as well.
var tesla = pang.Collection('Car').where({name: 'Tesla'}).build()[0];
pang.Collection('Model').get(tesla.model, {
success: function(object) {
$scope.tesla_model = object;
}
});##Other Here are some things which are used by Pang, but you will probably never use. They are available just in case, though.
- Every object in the collection has a
parseObjectIdwhich can be used to find the corresponding Parse Object. $scope.object.fetch()can be used to recollect all the objects.$scope.objects.autoSynccan be changed after calling build if needed.$scope.objects.reorder()will sort the objects again.
##Suggestions? Please, let me know!