AngularJS object differences

Question

I'm trying to wrap my head around JavaScript objects and am struggling to see how two objects are different.

I have an input form for adding records to a database and a controller that does the adding using $resource $save().

Before I show the input form, if I define the form object like this $scope.formUser = new Users(); the $save works.

If I define the form object ike this $scope.formUser = {}; the $save gives me this error: $scope.formUser.$save is not a function

If I do console.log(JSON.stringify($scope.formUser)); both objects look exactly the same to me:

$scope.formUser = new Users(); shows {"firstname":"aaa","lastname":"bbb"} $scope.formUser = {}; shows {"firstname":"aaa","lastname":"bbb"}

Why does one object save and the other one doesn't?

Is it possible to create an object that will work without using $scope.formUser = new Users();?

Here's my code...

angular.module('starter.services', [])

.factory('Users', function ($resource) {
    return $resource('https://example.com/:id', { id: '@id' }, {
        update: { method: 'PUT' }
    });
})


.controller('myController', function ($scope, $ionicPopup, Users) {

    // Triggered by clicking the 'add user' button in header.html
    $scope.addUser = function () {

        //$scope.formUser = {}; // this doesn't work
        $scope.formUser = new Users(); // this works

        // Show popup form
        $ionicPopup.show({
            templateUrl: 'templates/userform.html',
            title: 'Add new user',
            subTitle: 'Firstname is mandatory',
            scope: $scope,
            buttons: [
              { text: 'Cancel' },
              {
                  text: '<b>Save</b>',
                  type: 'button-positive',
                  onTap: function (e) {
                      if (!$scope.formUser.firstname) {
                          e.preventDefault(); // Prevent save if first name is empty
                      } else {
                          $scope.formUser.id = 0; // If id is left undefined, $save sends a GET method
                          $scope.formUser.$save()
                      }
                  }
              }
            ]
        });

    };
})

Answer 1

When you return the resource, it returns a resource object, which has the $save as a property. Doing $scope.formUser = {} is creating an empty object.