Angular-Parse

Angular wrapper for Parse.com JavaScript SDK.

Features

Getters and setters for attributes

Define object attributes

var object = new Parse.Object('Test');
Parse.defineAttributes(object, ['a', 'b', 'c']);
object.a = 123;
console.assert(object.a == 123);
console.assert(object.get('a') == 123);

Define subclass attributes

var MyClass = Parse.Object.extend("ClassName");
Parse.defineAttributes(MyClass, ['a', 'b', 'c']);
var object = new MyClass();
object.a = 123;
console.assert(object.a == 123);
console.assert(object.get('a') == 123);

Use decorator

@Parse.defineAttributes(['a', 'b', 'c'])
class MyClass extends Parse.Object {
  constructor() {
    super("ClassName");
  }
}
var object = new MyClass();
object.a = 123;
console.assert(object.a == 123);
console.assert(object.get('a') == 123);

$q Promise

object.save()
  .then(function() {
    $scope.saved = true;
  })
  .catch(function(err) {
    $scope.error = err;
  });

Installation

NPM

npm install angular-parse

Setup

Browser

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://parse.com/downloads/javascript/parse-1.6.2.min.js"></script>
<script src="angular-parse/angular-parse.js"></script>
<script>
  angular.module('demo', ['ngParse']);
</script> 

CommonJS

npm install angular parse angular-parse

var angular = require('angular');
var ngParse = require('angular-parse');
angular.module('demo', [ngParse]);

Usage

Include ngParse module

angular.module('demo', ['ngParse']);

Initialize Parse

angular.module('demo')
  .config(['ParseProvider', function(ParseProvider) {
    ParseProvider.initialize(MY_PARSE_APP_ID, MY_PARSE_JS_KEY);
  }]);

Initialize Facebook

<script src="https://connect.facebook.net/en_US/sdk.js"></script>

angular.module('demo')
  .config(['ParseProvider', function(ParseProvider) {
    ParseProvider.FacebookUtils.init({
      appId: MY_FACEBOOK_APP_ID,
      version: 'v2.4',//Currently available versions https://developers.facebook.com/docs/apps/changelog
      xfbml: false
    });
  }]);

Subclass

angular.module('demo')
  .factory('ParseComment', ['Parse', function(Parse) {
    var ParseComment = Parse.Object.extend('Comment', {/*...*/}, {/*...*/});
    Parse.defineAttributes(ParseComment, ['user', 'text']);
    
    /*
      Or use decorator with Babel https://babeljs.io/
      
      @Parse.defineAttributes('user', 'text')
      class ParseComment extends Parse.Object {
        constructor() {
          super("Comment");
        }
      }
      Parse.Object.registerSubclass('Comment', ParseComment);
    */
  }]);

User attributes

angular.module('demo')
  .config(['ParseProvider', function(ParseProvider) {
    ParseProvider.defineAttributes(ParseProvider.User, 'first_name', 'last_name', 'picture', 'comments');
  }]);

Authenticate

angular.module('demo')
  .run(['$rootScope', 'Parse', function($rootScope, Parse) {
    if (!Parse.User.authenticated()) {
      Parse.FacebookUtils.logIn('email', {})
        .then(function(user) {
          $rootScope.user = user;
        })
        .catch(function(err) {/*...*/});
    }
  }]);

Class instance

angular.module('demo')
  .controller('CommentController', ['$scope', 'Parse', 'ParseComment', function($scope, Parse, ParseComment) {
    var user = Parse.User.current();
    $scope.comment = new ParseComment();
    $scope.comment.set({user: user});
  }]);

<form ng-controller="CommentController" ng-submit="comment.save()">
  <label>
    Comment
    <textarea ng-model="comment.text"></textarea>
  </label>
  <p>User: {{comment.user.username}}</p>
  <p>Created At: {{comment.createdAt}}</p>
  <input type="submit" value="Save"/>
</form>

Query

angular.module('demo')
  .controller('CommentsController', ['$scope', 'Parse', 'ParseCommentClass', function($scope, Parse, ParseComment) {
    new Parse.Query(ParseComment)
      .include('user')
      .find()
      .then(function(comments) {
        $scope.comments = comments;
      })
      .catch(function(err) {
        $scope.error = err;
      });
  }]);

<div ng-controller="CommentsController">
  <div ng-repeat="comment in comments track by comment.$id">
    <p>User: {{comment.user.username}}</p>
    <img ng-src="comment.user.picture"/>
    <p>{{comment.text}}</p>
    <p>Created At: {{comment.createdAt}}</p>
  </div>
</div>

License

MIT