Desorder Desorder - 25 days ago 9
AngularJS Question

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>
</select>
</div>
</div>

<div>
<input type="button" value="Save" ng-click="save()">
<input type="button" value="Cancel">
</div>
</div>

<!-- Angular JS -->
<script src="assets/thirdparty/angular/1.4.8/js/angular.js"></script>

<!-- App Angular JS -->
<script src="assets/local/js/angular/accounts-app.js"></script>
<script src="assets/local/js/angular/controller/AccountController.js"></script>
<script src="assets/local/js/angular/service/RefDataService.js"></script>


An AccountController.js

(function() {

'use strict';

var app = angular.module('accounts-app', ['account-service']);
app.controller('AccountController', ['$scope', 'RefDataService', function($scope, RefDataService) {

$scope.accountTypes = RefDataService.refData.accountTypes;

var account = {
'name' : '',
'description' : '',
'number' : '',
'accountType' : ''
};

$scope.account = account;
$scope.accounts = [];

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

};

}]);

})();


And a RefDataService.js

(function() {

'use strict';

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

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

var refData = {};

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

return refData;

}]);
})();


I'm trying to load the account types from the rest and populate the select dropdown. I've tried and changed everything I could to make it happen but I either get a console error or no error but an empty dropdown as well.

Ideally, in a real application, this refDataService would load, as the name says, reference data. Advice on how to improve it are welcome.

Answer Source

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;
});