ParseAngularGuide

Collecting what I've learned building an Angular + Parse App

Setup

Include the Parse JS SDK. In this example, I'm just using Parse's CDN.

index.html:

<!-- snip -->

<!-- inclue Parse JS SDK-->
<script src="http://www.parsecdn.com/js/parse-1.2.9.min.js"></script>

<!-- snip -->

Create an Angular Service to initialize the Parse JS SDK:

skeletonApp.service('ParseService', [function() {
  var app_id = "1234";
  var js_key = "5678";
  Parse.initialize(app_id, js_key);
}]);

Now you have access to the JS SDK anywhere you inject ParseService.

Queries

Inside of the success callback, you must call $scope.$apply in order for the new data to be bound to the $scope. The same step is needed for $rootScope.

skeletonApp.controller('GameScoreListController', 
  ['$scope', 'ParseService', function($scope, ParseService) {

  var GameScore = Parse.Object.extend("GameScore");

  var query = new Parse.Query(GameScore);

  query.find({
    success: function(results) {
      $scope.$apply(function() {
        $scope.gameScores = results;
      });
    },
    error: function(error) {
      console.log(error);
    }
  });

}]);

Inserting Data

Just as with querying data, you'll need to add $scope.$apply inside of your success callback:

'use strict';

skeletonApp.controller('GameScoreController', 
  ['$scope', 'ParseService', function($scope, $location, ParseService) {

  $scope.submit = function() {

    var GameScore = Parse.Object.extend("GameScore");

    var gameScore = new GameScore();

    gameScore.set("score", 1337);
    gameScore.set("playerName", "Sean Plott");
    gameScore.set("cheatMode", false);
     
    gameScore.save(null, {
      success: function(gameScoreAgain) {
        $scope.$apply(function() {
          $scope.gameScore = gameScoreAgain;
        });
      },
      error: function(gameScore, error) {
        alert('Failed to create new object, with error code: ' + error.description);
      }
    }); 

  }


}]);

Persisting logged in users with localStorage

So far my favorite part of using the Parse JS SDK is that you don't need to touch localStorage to locally persist a user.

skeletonApp.controller('LoginController', 
  ['$scope', 'ParseService', '$location', '$rootScope', function($scope, ParseService, $location, $rootScope) {

  // redirect to "/" if user is already logged in
  if ($rootScope.currentUser !== null) {
    $location.path("/");
  }

  function loginSuccessful(user) {
    $rootScope.$apply(function() {
      // set the current user
      $rootScope.currentUser = Parse.User.current();
      // redirect
      $location.path("/");
    });
  }

  function loginUnsuccessful(user, error) {
    alert("Error: " + error.message + " (" + error.code + ")");
  }

  $rootScope.loggedIn = function() {
    if ($rootScope.currentUser === null) {
      return false;
    } else {
      return true;
    }
  };

  $scope.login = function() {    
    var username = $scope.login.username;
    var password = $scope.login.password;

    Parse.User.logIn(username, password, {
      success: loginSuccessful,
      error: loginUnsuccessful
    });
  };

  $scope.logout = funciton() {
    $rootScope.currentUser = null;
    Parse.User.logOut();
  }

}]);

In your views, you can hide and display different elements using the ng-show and ng-hide directives:

<div ng-controller="LoginController" ng-cloak>

  <div ng-show="loggedIn()">
    Welcome, <a href="#">{{ currentUser.get("username") }}</a> (<a ng-click="logout()">logout</a>)
  </div>

  <div ng-hide="loggedIn()">
    <a href="#login">Login</a> or <a href="#register">Create new account</a>
  </div>

</div>