Git Product home page Git Product logo

angular-parse's Introduction

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.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.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.get('a') == 123);

$q Promise

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

Installation

NPM

npm install angular-parse

Bower

bower install angular-parse-bower

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);
    */
    
    return 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.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', 'ParseComment', 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.