Code Monkey home page Code Monkey 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

angular-parse's People

Contributors

ivnivnch avatar timanrebel avatar tunght13488 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

angular-parse's Issues

Connect to parse-server after migrating to heroku/mongo

I am migrating my app from the Parse servers to Heroku/MongoLabs with the parse-server express code running. I've been able to connect my iOS client to the new api by specifying the url in the config. I'm wondering if there is a way to do something similar with this library because I was already using it for an accompanying Angular app. Any help would be appreciated. If it's not already built in, maybe you can point me to where I can modify the library to fit my needs.

Ng-model bind

Hello, there is some way to use bind attributes using ng-model?
Currently can't write on arrtributes because is read only.

Does this work with Angular 8 and Back4App?

Trying to use Parse as a backend for an Angular 8 app and having difficulties with binding UI to Parse.Object properties because of the getters and setters. Will this module work for the latest versions? Thanks.

GeoPoint Issues

Hello, it seems like the parse wrapper does not support geopoints, is that right?

Do I have to define attributes?

I'm lazy and dont want to define attributes. Is possible to utilise Object.keys to help with this? Here's my concept

var user = Parse.User.current();
Parse.defineAttributes(Parse.User, Object.keys(user.toJSON()));

This wont work as I'm defining the attributes after the Get. But maybe there another way Object.keys can be used.

Module 'ngParse' is not available

I followed your setup. This is my step:

  1. npm install angular-parse --save
  2. angular.module('newweb', ['ngParse']);
  3. angular .module('newweb') .config(config); /** @ngInject */ function config( ParseProvider) { ParseProvider.initialize( "ID", "KEY");}
    4.Used in controller
    function MainController($scope, $log, Parse) {
        var vm = this;
        vm.SaveToParse = SaveToParse;
function SaveToParse() {
            $log.debug('unsuccess');
            var CommentObject = Parse.Object.extend("CommentObject");
            var user = new CommentObject;
            var form = {};

But when I run the server, the screen is blank and in console , the error looks like this

Error: [$injector:modulerr] Failed to instantiate module newweb due to:
[$injector:modulerr] Failed to instantiate module ngParse due to:
[$injector:nomod] Module 'ngParse' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.8/$injector/nomod?p0=ngParse
minErr/<@http://localhost:3000/bower_components/angular/angular.js:68:12
module/<@http://localhost:3000/bower_components/angular/angular.js:2005:1
ensure@http://localhost:3000/bower_components/angular/angular.js:1929:38
module@http://localhost:3000/bower_components/angular/angular.js:2003:1
loadModules/<@http://localhost:3000/bower_components/angular/angular.js:4435:22
forEach@http://localhost:3000/bower_components/angular/angular.js:340:11
loadModules@http://localhost:3000/bower_components/angular/angular.js:4419:5
loadModules/<@http://localhost:3000/bower_components/angular/angular.js:4436:

I used other project called angular-parse-patch which works. I want to know what can lead this error and does it cause by the third step, there are a little difference in this step between my project and your README.

Included objects don't have attributes wrapped

Hey there,
I'm running a Parse Query that follows the same structure as the one in the readme, including a field called Address that is also subclassed and has attributes defined in my code. However, when I get the list of objects back and I drill down into the address field, it has no direct attributes defined on it - so I can go venue.address.attributes.formattedAddress, but not venue.address.formattedAddress.

Is this intended behaviour? In the example there it seems like you can include an arbitrary field (the example uses user) and expect its contents to be wrapped up and available directly on the object. Just wondering if I'm missing something.

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.