Simple AngularJS Web API failing

Question

I'm new to AngularJS and I am trying to replace some AJAX code for an HTML website I use for testing Web API services. So I've been working through some AngularJS examples to get a feel for how things work.

So far so good, but I cannot get calls to my web api services to work in AngularJS. I am sure I am missing something simple here but since I am new to this, I cannot see it. So I am hoping that someone can point me in the right direction.

What seems to be the issue is that in my controller, the loading or initialization of the service classes seems to be causing me problems. If I remove the service classes and just leave the controller, the HTML page renders correctly. But if I include them, the AngluarJS fields {{}}, show up with the angle brackets shown as text, so Angular is not handling them. But if I remove the service classes, Angular renders the fields as expected... then of course the service class fail to execute.

I get similar results by putting the $http call in the controller and removing the services, but then the web api is never called. So I don't know what the issue is.

My goal is just to get a working example using my web api services. So I service classes at this point. I just need to get it to work so I have somewhere to start.

Any suggestions or guidance is much appreciated. I'm hoping someone can scan through this quickly and see what I am unable to see, which I suspect is something pretty simple.

Best regards, Jon

Here's my HTML page... pretty simple.

<!DOCTYPE html>
<html ng-app="myAngularApplication">
<head>
    <title>Sample Angular Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>    
    <script src="app/app.js"></script>
    <script src="app/loan/loanController.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body ng-controller="loanController" class="panel-body">
<div class="text-primary">
    <div class="panel panel-default">
        <div class="panel-body">
            <table>
                <tr>
                    <td colspan="3" class="modal-title" style="font-weight: bold;">Encompass Pricing Engine Web API Service</td>
                </tr>
                <tr>
                    <td class="control-label">Loan Number</td>
                    <td>
                        <input type="text" ng-model="loanNumber" value="160000223" class="form-control" style="width: 150px; height: 32px;" />
                    </td>
                    <td>
                        <input type="button" ng-click="fetchLoanFromServer()" value="Get Loan" class="btn-sm btn-success">
                    </td>
                </tr>
            </table>
        </div>
    </div>                
    <p>
        {{message}}
    </p>
    <p>
        {{loan}}
    </p>
    <p>
        {{error}}
    </p>
</div>
</body>
</html>

app.js

(function(){
    myModule = angular.module("myAngularApplication", []);
}());

loanController.js

(function () {

var loanController = function ($scope, $filter, localLoanService, remoteLoanService) {

    $scope.message = "Loan returned";
    $scope.error = "";

    $scope.loan = [];

    $scope.fetchLoan = function () {
        $scope.loan = localLoanService.loan;
    }

    $scope.fetchLoanFromServer = function () {
        remoteLoanService.fetchLoan($scope.loanNumber)
        .success(function (data, status, headers, config) {
            $scope.loan = data;
        })
        .error(function (data, status, headers, config) {
            $scope.loan = [];
            $scope.error = "Failed to retrieved loan from server";
        });
    };

}

//angular.module("myAngularApplication").controller("loanController", ["$scope", loanController]);
angular.module("myAngularApplication").controller("loanController", ["$scope", "$filter", "localLoanService", "remoteLoanService", loanController]);
//angular.module("myAngularApplication").controller("loanController", ["$scope", "remoteLoanService", loanController]);    
//angular.module("myAngularApplication").controller("loanController", ["$scope", "$filter", "remoteLoanService", loanController]);    
}());

localLoanService.js - This just returns a list of books from an example I was trying to get to work.

(function () {

var localLoanService = function () {
    var loan = [
        { ID: 1, BookName: "Test Books 1", AuthorName: "Test Author 1", ISBN: "TEST1" },
        { ID: 2, BookName: "Test Books 2", AuthorName: "Test Author 2", ISBN: "TEST2" },
        { ID: 3, BookName: "Test Books 3", AuthorName: "Test Author 3", ISBN: "TEST3" },
        { ID: 4, BookName: "Test Books 4", AuthorName: "Test Author 4", ISBN: "TEST4" },
        { ID: 5, BookName: "Test Books 5", AuthorName: "Test Author 5", ISBN: "TEST5" }
    ];

    return {
        loan: loan
    };
}

angular.module("myAngularApplication").factory("localLoanService", [localLoanService]);
}());

remoteLoanService.js - This is what I am really trying to do, just call out to a Web API service. If I do basically the same thing in the controller itself, it still doesn't work. I cannot figure out how to get AngularJS to make this call. My method has only a single parameter of id and returns JSON.

(function () {

var remoteLoanService = function ($http, loanNumber) {
    var fetchLoan = function () {
        return $http({
                        url: "http://vmw-devt-fsnt82:9810/api/Loan/GetLoan/001120210",
                        method: "GET",
                        params: {id: angular.toJSON(loanNumber, false)}
                    });
    };

    return {
        fetchloan: fetchLoan
    };
}

angular.module("myAngularApplication").factory("remoteLoanService", ["$http", remoteLoanService]);
}());

lingthe · Accepted Answer · 2017-09-15 15:57:06Z

You are not handling response in your service function. It's missing then part:

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
 // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

But for your service you should use promises, using $q

service:

(function () {

var remoteLoanService = function ($http, $q) {

    var fetchLoan = function (loanNumber) {

        var deferred = $q.defer();

        $http({
            url: "http://vmw-devt-fsnt82:9810/api/Loan/GetLoan/001120210",
            method: "GET",
            params: {id: angular.toJSON(loanNumber, false)}
        }).then(function(response){

            deferred.resolve(response);

        }, function(error){

            deferred.reject();
        });
       return deferred.promise;
    };

    return {
        fetchloan: fetchLoan
    };
}
})();

and in you controller:

$scope.fetchLoanFromServer = function () {
        remoteLoanService.fetchLoan($scope.loanNumber)
        .success(function (data) {
            $scope.loan = data;
        })
        .error(function (data) {
            $scope.loan = [];
            $scope.error = "Failed to retrieved loan from server";
        });
    };

Collectives™ on Stack Overflow

Simple AngularJS Web API failing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related