trycom / parse-angular-demo Goto Github PK

I have run into many difficulties and errors following the instructions.
Is it perhaps possible to post here a complete ready build of the demo
that can be directly downloaded without running any scripts?
Thanks!

Hi, Thanks for sharing this. I've learned a lot.

I can manipulate my Parse database fine with this project and I can make calls to facebook, but I get the following error when I press the Facebook 'Connect' button within the demo app. I'm having trouble debugging this.

I have the Facebook App integration setup on Parse.com with the Facebook AppID and secret and within Facebook, a web app setup with a Site URL specified as http://localhost:3000 I can successfully send and receive with Facebook (if I'm already logged into facebook) but either way, that Connect button fails for me.

Anything obvious that I might be missing?

Thanks for any help,
Jim

TypeError: Cannot convert undefined or null to object
at hasOwnProperty (native)
at Function._.has (http://www.parsecdn.com/js/parse-1.2.18.js:1012:27)
at Parse.User.Parse.Object.extend._linkWith (http://www.parsecdn.com/js/parse-1.2.18.js:7013:13)
at Function.Parse.User.Parse.Object.extend._logInWith (http://www.parsecdn.com/js/parse-1.2.18.js:7536:19)
at Object.Parse.FacebookUtils.logIn (http://www.parsecdn.com/js/parse-1.2.18.js:8563:27)
at Object.Parse.(anonymous function).(anonymous function) as logIn
at Scope.$scope.fbConnect (http://localhost:3000/app/scripts/controllers/facebook-example.js:23:25)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:10694:21
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:18882:17
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:12556:28) angular.js:9937

Have spend the night trying to grasp how the code is working, just started to learn Angular and quickly realized the difficulty of linking parse objects to the 'Angular kingdom' as you so correctly point out.

I was a bit confused, though, when I ran the demo on my machine and the 'Save To Parse' button did nothing as I tried to edit a Monster object.

Ended up doing the following in details.js:

  $scope.editedMonster = {'name' : $scope.detailCtrl.current.getName(), 'reason' : $scope.detailCtrl.current.getReason()}

  $scope.saveMonster = function() {
      var current = $scope.detailCtrl.current;
      current.setName($scope.editedMonster.name);
      current.setReason($scope.editedMonster.reason);
      ParseQueryAngular(current, {functionToCall:"save", params:[null]}).then(new function(obj) {
          alert('success');
     });
  };

No idea if this is an optimal solution, just wanted to share my first-try during this learning experience.

Just discovered parse-angular-patch minutes ago which looks exactly what I am looking for. Cannot wait till I get the time to play around with it!

Getting stuck in starting the server with compass issue.

I also tried to start with --force option but it also shows an error in browser.

I have compass version Compass 0.12.2 (Alnilam)

My console is littered with error statements (particularly when running tests) with the following:
FB.init has already been called - this could indicate a problem

so far I have yet to encounter where this is problematic.

For reference, I have included the following files in my index.html:
parse-angular-patch/dist/parse-angular.js
parse-angular-demo/services/ParseServices.js
parse-angular-demo/services/FacebookAngularPatch.js

and I have the following async sdk code there too:

    <script type="text/javascript">
      (function(doc, script) {
        var js,
            fjs = doc.getElementsByTagName(script)[0],
            add = function(url, id) {
                if (doc.getElementById(id)) {return;}
                js = doc.createElement(script);
                js.src = url;
                id && (js.id = id);
                fjs.parentNode.insertBefore(js, fjs);
            };
        // Facebook SDK
        add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
      }(document, 'script'));
    </script>

    <!-- Async resolve promise when FB SDK is loaded, this triggers Parse.FacebookUtils.init() -->
    <script>
      var fbDeferred = $.Deferred();
      window.fbPromise = fbDeferred.promise();
      window.fbAsyncInit = function() {
        fbDeferred.resolve();
      };
    </script>

    <script type="text/javascript">
      // manual bootstrap
      angular.element(document).ready(function() {
        angular.bootstrap(document, ['cloakroomApp']);
      });

    </script>

What can I do to remove this error?

First, kudos for providing this great example and Parse integration.

Setup went smoothly even though its my first time with a lot of these components.

But my sample website did not run at http://localhost.com:3000

Just plain old http://localhost:3000 worked fine. Maybe too obvious to point out, but there might be one or two people who can't work this out for themselves.

It seems like this repo is out of date with the latest changes.

The boiler plate code refers to https://github.com/brandid/parse-angular-demo/blob/master/client/app/scripts/services/ParseQueryAngular.js

However, this does not even exist in the code base.

Also the demo and the boiler plate are different versions. What do we follow?

when running node install, it fails trying to clone a repository named 'modules', which does not exist in your github.

npm http 304 http://registry.npmjs.org/grunt-express-server
npm http 304 http://registry.npmjs.org/grunt-text-replace
npm http 304 http://registry.npmjs.org/grunt-angular-templates
npm http 304 http://registry.npmjs.org/grunt-contrib-htmlmin
The authenticity of host 'github.com (192.30.252.130)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)? yes
npm ERR! git clone [email protected]:brandid/modules.git Cloning into bare repository /Users/npahucki/.npm/_git-remotes/git-github-com-brandid-modules-git-13a29a6a...
npm ERR! git clone [email protected]:brandid/modules.git
npm ERR! git clone [email protected]:brandid/modules.git Warning: Permanently added 'github.com,192.30.252.130' (RSA) to the list of known hosts.
npm ERR! git clone [email protected]:brandid/modules.git ERROR: Repository not found.
npm ERR! git clone [email protected]:brandid/modules.git fatal: The remote end hung up unexpectedly
npm ERR! Error: Command failed: Warning: Permanently added 'github.com,192.30.252.130' (RSA) to the list of known hosts.
npm ERR! ERROR: Repository not found.
npm ERR! fatal: The remote end hung up unexpectedly
npm ERR!
npm ERR! at ChildProcess.exithandler (child_process.js:637:15)
npm ERR! at ChildProcess.EventEmitter.emit (events.js:98:17)
npm ERR! at maybeClose (child_process.js:735:16)
npm ERR! at Socket. (child_process.js:948:11)
npm ERR! at Socket.EventEmitter.emit (events.js:95:17)
npm ERR! at Pipe.close (net.js:466:12)
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR! http://github.com/isaacs/npm/issues

npm ERR! System Darwin 13.0.2
npm ERR! command "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/npahucki/Projects/parse-angular-demo
npm ERR! node -v v0.10.24
npm ERR! npm -v 1.3.21
npm ERR! code 128
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/npahucki/Projects/parse-angular-demo/npm-debug.log
npm ERR! not ok code 0

Hey,

when I am trying to deploy to parseapp I am getting this error:

Malformed response {u'code': 122, u'error': u'Bad file name: app/scripts/modules/data/_ParseObjects.js'} when trying to upload app/scripts/modules/data/_ParseObjects.js

According to https://parse.com/docs/cloud_code_guide#hosting-uploading

• Filenames should begin with an alphanumeric character and consist only of alphanumeric characters, dashes, underscores, spaces, and '@' signs.

so they should not start with a underscore?

Hey hey,

Would it be possible to add a couple small snippets of documentation for using:
ParseQueryAngular and MonsterService.

I've been over the site and read through your code but I'm still struggling to get the gist of how the bound data is used.

Many Thanks

When i tried to call any object, nothing happened (no data & no errors), any idea regarding this issue?

Find the error log below:
Error: [$injector:undef] Provider 'FacebookAngularPatch' must return a value from $get factory method.
http://errors.angularjs.org/1.4.7/$injector/undef?p0=FacebookAngularPatch
at angular.js:68
at Object.enforcedReturnValue as $get
at Object.invoke (angular.js:4478)
at angular.js:4295
at getService (angular.js:4437)
at Object.invoke (angular.js:4469)
at extend.instance (angular.js:9136)
at nodeLinkFn (angular.js:8248)
at compositeLinkFn (angular.js:7680)
at compositeLinkFn (angular.js:7684)

There is the snapshot for this error. After I install the bower and the packages I try to run 'grunt server' and I see this.

When I run grunt server and run locally, everything runs smoothly. However, when I run "grunt prod" and deploy that standalone build to github using gh-pages, I see the following errors in the console:

GET http://ericrius1.github.io/omies-prod/app/scripts/all.min.js 404 (Not Found)

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.8/$injector/modulerr?p0=app&p1=Error%3A%20%…F1.2.8%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20Error%20(native......1)

I looked through the built project to see why I was getting the 404 for all.min.js, and that file didn't exist. Instead, there was a ff1d401.all.min.js

A similar thing happened with the minified CSS- the file I see is 6f961c64.app.min.css

Other then this issue with getting my project in a deployable state, so far this is absolutely amazing and I am learning so much from your guys's code, thanks!!

Hi guys,
Have been playing with the library, thanks. I'm wondering if you tried using Restangular with Parse.com? And if so what the outcome was, before I have a play around.

Thanks for sharing,
Pat

Would like to see how this operates http://brandid.github.io/parse-angular-demo

Hi,
I'm trying to use ParseQueryAngular (PQA) with the Parse.User object. The problem I have is accessing the returned data when using PQA. Using the standard method works fine but when I use PQA it doesn't seem to trigger the .then() (but it is successful looking at the returned data from the ajax call).

This works and I can access 'error' and 'user' respectively:

return user.signUp().then(function(user){
    console.log(user)
  },function(error){
    console.log(error)
  }
});

But when I use this, although the call is successful and returns the correct response i can't access 'user' or 'error':

return ParseQueryAngular(user, {
    functionToCall:"signUp", 
    params:[]
}).then(function(user) {
    console.log('created user')
}, function(error) {
    console.log(error)
});

Any ideas why this is?
Thanks,
Pat

Just a minor thing I don't really understand.

In some places of your demo, eg. in master-detail.html, you use transitionTo(state), while in other parts, eg. about.list.html, you use goForwardToPath(path) to navigate from one view to another.

I thought that one of the reasons behind using ui.router is that you define state transitions, which are then mapped to paths, which are then mapped to controller invocations. And so I assume you should just work with state transitions (as with transitionTo()) and not with paths (as with goForwardToPath()).

So what's the reason for using goForwardToPath() in about.list.html?

Thanks,
balazs

Running "clean:build" (clean) task

Running "copy:images" (copy) task
Copied 107 files

Running "copy:client" (copy) task
Created 112 directories, copied 828 files

Running "copy:components" (copy) task
Created 92 directories, copied 731 files

Running "copy:js" (copy) task
Copied 375 files

Running "copy:templates" (copy) task
Copied 96 files

Running "compass:prod" (compass) task
error client/app/styles/app.scss (Line 247 of client/app/styles/../../../com
ponents/sass-bootstrap/lib/_mixins.scss: Invalid CSS after "...-shadow($shadow":
expected ")", was "...) {")
create build/app/styles/app.css
Warning: Task "compass:prod" failed. Use --force to continue.

Aborted due to warnings.

trying to use this in my own app, but struggling to understand the source for the master detail control.

where is the 'monsters' service created? it is referenced in master-detail.js as a reference to the collection.

Here is my output from my bash terminal in OSX 10.9.1

my-prompt:[parse-angular-demo] (master)$ grunt server
Running "clean:build" (clean) task
Cleaning "build/"...OK

Running "copy:images" (copy) task
Copied 3 files

Running "copy:client" (copy) task
Created 21 directories, copied 101 files

Running "copy:components" (copy) task
Created 53 directories, copied 431 files

Running "copy:js" (copy) task
Copied 21 files

Running "ngtemplates:app" (ngtemplates) task
File build/app/scripts/app.templates.js created.

Running "compass:prod" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH 
for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use 
--force to continue.

Aborted due to warnings.
my-prompt:[parse-angular-demo] (master)$ 

If I follow the suggestion and use the --force command then the website looks as if the styles aren't being rendered properly.

I am new to AngularJS and Parse so any help would be greatly appreciated.

The command

git clone [email protected]:brandid/parse-angular-demo.git

produced errors:

Cloning into 'parse-angular-demo'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

This seems to work instead:

git clone git://github.com/brandid/parse-angular-demo.git

Hey guys I justed wanted to say many thanks for this demo application it helped me a lot to get going with Angular and Parse. If you ever expand brandid to Europe i certainly gonna buy from you guys ;-) ... please keep up the good spirit...greetings from the Netherlands

Hi Guys, first of all this boilerplate is awesome!
How can I use angularjs filter and orderBy directives ? Since your boilerplate uses backbone models I'm kind of lost trying to use vanilla angular code.
I'm trying to filter a collection from Parse.

Best Wishes.

Thank you for the great framework.

I am a new bee into angular, I am asking can I install this framework on parse hosting and how?
I just want the parse model wrapper.

Hi all, I am testing this demo, and I am particularly interested in implementing a similar solution to offer Facebook login to my users. However while testing the demo app, I noticed how even if the user is logged in, the promise is never resolved. I am in particular speaking about this bit of code:

ParseQueryAngular(Parse.FacebookUtils,{functionToCall:"logIn", params:[Parse.User.current(), "user_likes"]}).then(function(user) {
  alert('facebook connected!');

  $scope.facebookCtrl.fbAuthData = user.get('authData');

}, function(error) {

  alert('something went wrong, try again');

  $scope.facebookCtrl.fbAuthData = error;

});

There is any fix for that?

I have this warning when run npm install , and available version for "grunt-contrib-mincss" are ["0.1.0","0.2.0","0.3.0","0.3.1","0.3.2","0.4.0-rc7"], I think it's better to remove "~" from package.json for "grunt-contrib-mincss"

Hi,

Awesome job on this. I am having a bit of a problem calling my cloud function within my app.run().

var cc = ParseCloudCodeAngular('loadUserAccounts', {functionToCall:"run"});

The above returns an the promise object, with the then(), finally() methods. But how do I get the actual results?

var cc = ParseCloudCodeAngular('loadUserAccounts', {functionToCall:"run"}).then(function(res) {
   console.log(res);
});

And the above also logs the promise object.

I'm attaching the snapshot for this error. I just download it and follow your instructions in your readme.md and found this. Any ideas what it could be?

When I load http://brandid.github.io/parse-angular-demo/#/facebook after being logged, is shown in the console: "FB.init has already been called - this could indicate a problem"

When running 'grunt server' it just keep saying 'waiting...' after running 'watch' task.

See attachment.

parse-angular-demo uses state resolves in order to load objects into the controller.

for example, in client/app/scripts/controllers/master-detail.js, the Monsters collection is fetched in the resolve for the state

how can I replicate such "resolve" behaviour using promises in services