Requesting Example for angular.js $http (not $resource) and ASP.NET/C#

Question

I'm still trying to learn how AngularJS's framework works, so please bear with me.

I'm having issues in saving the data with BarcodeSave() method, however, I have no problem retrieving the data from BarcodeItem() and BarcodeList().

What I've heard so far (I could be wrong), $resource is a bit limited for this project, which is why I'm only interested in using $http. Although, I like to hear your opinions with solutions regardless.

ASP.NET/C#

public CsBarcode BarcodeSave(string barcodeVal, string courierType, string userName)
Saves to the database and returns JSON, IsSuccess = true for success or IsFailed = true if failed. The status will be in the Status field
Name: BarcodeSave
Returns: CsBarcode (JSON object)
Parameters
barcodeVal (string) – the value that came from the scanner
courierType (string) – the location, send constant: PICKUP or DROPOFF
userName (string) – the login name of the user. Will come from the Sign In page


public CsBarcode BarcodeItem(string barcodeVal, string userName)
Retrieves information from the database for one individual item matching by the barcode value
Name: BarcodeItem
Returns: CsBarcode (JSON object)
Parameters
barcodeVal (string) – the value that came from the scanner
userName (string) – the login name of the user. Will come from the Sign In page

public List<CsBarcode> BarcodeList(string userName)
Retrieves information from the database for all items by the courier - userName
Name: BarcodeList
Returns: List of CsBarcode (list of JSON objects)
Parameters
userName (string) – the login name of the user. Will come from the Sign In page

AngularJS - Factory

//Factory to get Pick Up List
angular.module('app.pickUpServ', []).factory('pickUpServ', ['$http',
    function($http) {

    var params = "{'barcodeVal':'" + '12345678' +
            "','courierType':'" + 'PICKUP' +
            "','userName':'" + 'aspuser' + "'}";

        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeItem2',
                    data: params,
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(data).error(function (error) {
                    console.log('Error - getPickUpList');
                });
            },
            updatePickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeSave2',
                    contentType: 'application/json; charset=utf-8',
                    data: params,
                    dataType: 'json'
                }).success(data).error(function (error) {
                    console.log('Error - updatePickUpList');
                });
            }
        }
    }
]);

AngularJS - Controller

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', '$rootScope', 'pickUpServ', function ($scope, $rootScope, pickUpServ) {
        //Get Pick Up Data
        pickUpServ.getPickUpList(function (data) {
                $scope.items = data;
                console.log(data);
        });

} ]);

JSON

[
  {
       "Id":1,
       "BarcodeValue":"99999999",
       "CSN":"99999999",
       "MRN":"99999999xxx",
       "UserName":"steinan",
"FirstName":"Anthony",
"LastName":"Stein",
"DateProcessed":"9/1/2014",
"IsProcessed":false,
"IsSuccess”:false,
"IsFailed":true,
       "Status":"Failed"
  },
  {    "Id":1,
       "BarcodeValue":"88888888",
       "CSN":"88888888",
       "MRN":"88888888xxx",
       "UserName":"davisnick",
"FirstName":"Nick",
"LastName":"Davis",
"DateProcessed":"8/1/2014",
"IsProcessed":true,
"IsSuccess”:true,
"IsFailed":false,
       "Status":"Success"
  }
]

HTML

<div ng-controller="ScanListCtrl">
    <div class="row prepend-top-md">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-barcode"></i>&nbspScan Item</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group input-group-lg">
                        <input type="number" class="form-control" placeholder="Scan Item" ng-model="BarcodeValue"
                            ng-change="autoAddItem()" is-focus>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button" ng-click="addRow()">
                                Add Barcode</button>
                        </span></div>
                </div>
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 3%">
                                #
                            </th>
                            <th>
                                <i class="fa fa-barcode"></i>&nbspBarcode
                            </th>
                            <th>
                                <i class="fa fa-medkit"></i>&nbspCSN
                            </th>
                            <th>
                                <i class="fa fa-user"></i>&nbspUser
                            </th>
                            <th>
                                <i class="fa fa-clock-o"></i>&nbspDate
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in items | orderBy:'Id':true:reverse">
                            <td class="text-center">
                                [{{item.Id}}]
                            </td>
                            <td>
                                {{item.BarcodeValue}}
                            </td>
                            <td>
                                {{item.CSN}}
                            </td>
                            <td>
                                {{item.LastName + ', ' + item.FirstName}}
                            </td>
                            <td>
                                {{item.DateProcessed}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

Figured it out! :) It was scope var issue.

pickUpServ - factory

angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
function ($rootScope, $http) {

    var params = "{'barcodeVal':'" + '12345678' +
                "','courierType':'" + 'PICKUP' +
                "','userName':'" + 'aspuser' + "'}";

    return {
        items: [params],
        getPickUpList: function (data) {
            $http({
                method: 'POST',
                url: 'app/Service/CourierService.asmx/BarcodeList',
                data: params,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
            }).success(data).error(function (error) {
                console.log('Error - getPickUpList');
            });
        },
        savePickUpList: function (item) {
            this.items.push(item);
            console.log(item);
            console.log('item --- ' + JSON.stringify(item));
            console.log('params --- ' + params);

            $http({
                method: 'POST',
                url: 'app/Service/CourierService.asmx/BarcodeSave',
                data: JSON.stringify(item),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
            }).success(function(data, status, headers, config){
                console.log('Success! - updatePickUpList');
            }).error(function (error) {
                console.log('Error - updatePickUpList');
            });
        }
    };
    }
]);

ScanListCtrl - Controller

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ', function ($scope, pickUpServ) {
//Get Pick Up Data
if ($scope.title == 'Pick Up') {
    $scope.items = pickUpServ.items;

    pickUpServ.getPickUpList(function (data) {
        $scope.items = data.d
    });

    $scope.autoAddItem = function () {
       if (($scope.BarcodeValue + '').length == 8) {
           pickUpServ.savePickUpList({
                "barcodeVal": $scope.BarcodeValue,
                //CSN: $scope.BarcodeValue,
                "courierType": "PICKUP",
                "userName": "aspuser"
            });
       }
    };
}

} ]);