Desorder February 2016

angularjs - controller service rest calls

I've been avoiding asking this here as there are loads of examples out there but I have no idea what's I'm doing wrong. I'm trying to put a little angular app in place but I'm struggling to get it working pass the very basics.

I want to get a little CRUD happening but using a reasonable clean structure that I could use as a template for other apps. I've found millions of examples but only using controllers and I found millions of examples on how to implement and DI services. I'm now trying to put them together but no joy.

Here we go.

I have a simple accounts.html

<h1>Accounts</h1>

<div ng-controller="AccountController">
    <div>
        <table>
            <tr>
                <td>Name</td>
                <td>Description</td>
                <td>number</td>
                <td>accountType</td>
                <td>Delete</td>
            </tr>

            <tr ng-repeat="acct in accounts">
                <td>{{acct.name}}</td>
                <td>{{acct.description}}</td>
                <td>{{acct.number}}</td>
                <td>{{acct.accountType}}</td>
                <td>{{delete(acct)}}</td>
            </tr>
        </table>
    </div>

    <hr>

    <div>
        <div>
            Name:<input type="text" ng-model="account.name">
        </div>
        <div>
            Description:<input type="text"
                ng-model="account.description">
        </div>
        <div>
            Number:<input type="text" ng-model="account.number">
        </div>
        <div>
            Account Type:<select ng-model="account.accountType">
                <option ng-repeat="acctType in accountTypes">{{acctType}}</option>
                    

Answers


Joe Clay February 2016

You're trying to use accountTypes as an object/array:

$scope.accountTypes = RefDataService.refData.accountTypes;

...but you've defined it as a function in your controller:

refData.accountTypes = function() {
    return $http.get(url + '/accounttypes');
}

Additionally, it looks like you're expecting $http.get() to return the data directly - it actually returns a promise with the response of the request as an argument. You need to use it like this (assuming your REST call returns the object you need):

$http.get(url + "accounttypes").then(function (response) {
    refData.accountTypes = response;
});


Július Retzer February 2016

Here is a working plunker.

app.controller('AccountController', ['$scope', 'RefDataService', function($scope, RefDataService) {
RefDataService.accountTypes().then(function(response){
  $scope.accountTypes = response;
});

$scope.account = {
    'name' : '',
    'description' : '',
    'number' : '',
    'accountType' : ''
};
$scope.accounts = [];

$scope.save = function save() {
    $scope.accounts.push($scope.account);
    $scope.account = {
        'name' : '',
        'description' : '',
        'number' : '',
        'accountType' : ''
    };

};

}]);

var serviceModule = angular.module('account-service', []);

serviceModule.service ('RefDataService', ['$http',
    function($http) {
        var url = 'http://localhost:8080/accounts-rest/api/refdata';

        this.accountTypes = function() {
            return $http.get(url + '/accounttypes');
        }
}]);

Things I changed:

  • Your RefDataService declaration looked more like factory than service (you should read about the difference for example [here])(AngularJS: Service vs provider vs factory). Module.service expects a constructor function which is on injection invoked with new operator so here I attach accountTypes method to this
  • In your controller you then use the service as Joe Clay described in his answer
  • I fixed $scope.accounts.push(this.account); to $scope.accounts.push($scope.account);. You would use this.account if you were using the controllerAs syntax.

Post Status

Asked in February 2016
Viewed 2,920 times
Voted 7
Answered 2 times

Search




Leave an answer