Add records to existing Firebase Datamodel with Angularjs

Question

I have been scrambling my brains for hours trying to implement this code in the Firebase Documentation with my own solution.

I have a Posts.json as a data source in Firebase with the following structure example:

{
Title: "Cheese Fondling",

Body: "I love cheese, especially paneer mozzarella. Roquefort cheeseburger cut the cheese fondue edam taleggio cheese slices gouda. Dolcelatte croque monsieur cottage cheese camembert de normandie cheese slices st. agur blue cheese bavarian bergkase swiss. Edam cheesecake parmesan.",
}

I am not sure if I need to update its records via set() as the file already exists but as it does not work I attempted with Push, which still does not work.

My HTML form view looks as follows:

      <form class="form-horizontal" ng-submit="AddPost()">
            <fieldset>

                <!-- Form Name -->
                <legend>{{addp.title}}</legend>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtTitle">Title</label>
                    <div class="col-md-4">
                        <input id="txtTitle" name="txtTitle" type="text" placeholder="placeholder" class="form-control input-md"  ng-model="post.Title">

                    </div>
                </div>

                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtPost">Post</label>
                    <div class="col-md-4">
                        <textarea class="form-control" id="txtPost" name="txtPost"  ng-model="post.Body"></textarea>
                    </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="singlebutton"></label>
                    <div class="col-md-4">
                        <input id="singlebutton" ng-disabled="!post.Title || !post.Body" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
                    </div>
                </div>

            </fieldset>
        </form>

The controller is added separately via state:

  .state('AddPost', {
      url: '/blog',
      controller: 'AddPostCtrl as addp',
      templateUrl: 'blog.html',
      title: 'Blog'
    })

This is the controller code:

    controllersModule.controller('AddPostCtrl', ["$scope", '$firebaseArray',
      function($scope, $firebaseArray){
         $scope.AddPost = function() {

   var title = $scope.post.Title;
   var post = $scope.post.Body;
   $scope.refPosts = postsArray;

   var ref = new Firebase('https://<DATASOURCE>.firebaseio.com/');
   var refPosts = ref.child("Posts")
   var postsArray = $firebaseArray(refPosts);

   postsArray.$add({ Title: Title, Body: Body }).then(function(ref) {
        console.log(ref);
        console.log("It worked");
    }, function(error) {
        console.log("Error:", error);
        console.log("It did not work");
    });
}
    }]);

EDITED ABOVE. AND ALSO ADDED THIS IN THE POSTS VIEW:

<div class="meeting" ng-repeat="post in refPosts">
    <h5>{{post.Title}}</h5>
    <p>{{post.Body}}</p>

</div>

Answer 1

While AngularFire and Firebase's JavaScript SDK interact with each other fine, you cannot call methods from one on objects from the other. You either have a Firebase JavaScript reference, on which you call ref.push() or you have an AngularFire $firebaseArray, on which you call array.$add().

With Firebase.push()

$scope.AddPost = function() {

   var title = $scope.post.Title;
   var post = $scope.post.Body;

   var ref = new Firebase("https://<DATA SOURCE>.firebaseio.com/");
   var refPosts = ref.child("Posts")

   refPosts.push({ Title: title, Body: body }, function(error) {
       if (error) {
           console.log("Error:", error);
       }
       else {
           console.log("It worked");
       }
   });
}

With $firebaseArray.$add()

 $scope.AddPost = function() {

   var title = $scope.post.Title;
   var post = $scope.post.Body;

   var ref = new Firebase("https://<DATA SOURCE>.firebaseio.com/");
   var refPosts = ref.child("Posts")
   var postsArray = $firebase(refPosts);

   postsArray.$add({ Title: title, Body: body }).then(function(ref) {
        console.log(ref);
        console.log("It worked");
    }, function(error) {
        console.log("Error:", error);
        console.log("It did not work");
    });
}

Answer 2

So here is the final code. It does help to have other people's feedback:

controllersModule.controller('AddPostCtrl', ["$scope", '$firebaseArray',
  function($scope, $firebaseArray){
    var ref = new Firebase('https://<DATASOURCE>.firebaseio.com/Posts');
    var myPosts = $firebaseArray(ref);

    $scope.myPosts = myPosts;

    $scope.AddPost = function() {
        myPosts.$add({
            Title: $scope.post.Title,
            Body: $scope.post.Body
        }).then(function(ref) {
        console.log(ref);
    }, function(error) {
        console.log("Error:", error);
    });
    }
}]);