Connect Models in Angular.js

Question

I'm just getting started with Angular.js and I'm not sure how to "link" two "models" together. I have the following code in my index.php file

<div ng-controller="AccountCtrl">
    <h2>Accounts</h2>
    <ul>
        <li ng-repeat="account in accounts">
            <span>{{account.id}} {{account.ownedBy}}</span>
        </li>
    </ul>
</div>
<div ng-controller="TransactionCtrl">
    <h2>Transactions</h2>
    <ul>
        <li ng-repeat="transaction in transactions">
            <span>{{transaction.id}} {{transaction.timestamp}} {{transaction.amount}} {{transaction.description}} {{transaction.account}}</span>
        </li>
    </ul>
</div>

and the following js

function AccountCtrl($scope, $http) {
    // initialize Data
    $http({
        method:'GET', 
        url:'http://api.mydomain.ca/accounts'
    }).success(function(data, status, headers, config) {
        $scope.accounts = data;
    }).error(function(data, status, headers, config) {
        alert('Error getting accounts. HTTP Response status code: '+status);
    });
}
function TransactionCtrl($scope, $http) {
    // initialize Data
    $http({
        method:'GET', 
        url:'http://api.mydomain.ca/transactions'
    }).success(function(data, status, headers, config) {
        $scope.transactions = data;
    }).error(function(data, status, headers, config) {
        alert('Error getting transactions. HTTP Response status code: '+status);
    });
}

So in my example each account will have many transactions and I want to add a function to my account controller to calculate the balance of the account based on the transactions but I'm not sure how to do that because they are in different $scopes.

Is there a way to do this in Angular or do I have to return the "linked" transaction information in my JSON response from the server when I get the accounts?

Tosh · Accepted Answer · 2013-01-23 21:54:13Z

2

I guess account holds transactions, right? Then I guess, you can create an service to manage account / transaction data. Inject this service into both controllers.

module = angular.module('app', []);

module.factory('accountService', function($http) {
  var obj = {
    // handles http communication to/from server.
    // also has methods/getters/setters for data manipulation, etc.
  };
  return obj;
});

module.controller('AccountCtrl', function($scope, accountService) {
   // access accountService for the view-databind.
});

module.controller('TransactionCtrl', function($scope, accountService) {
   // access accountService for the view-databind.
});

answered Jan 23, 2013 at 21:54

Tosh

36k11 gold badges67 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Felda · Accepted Answer · 2013-01-23 22:02:24Z

1

Since you are making both http requests at the same time, I would change my service to return the transactions as a property of the account object. Then it would be one server call, less overhead, and you data would be in the format that you need it in. I think you have the right idea with your last question.

And good choice using Angular. If you haven't found them yet, John Lindquest released a great set of videos at egghead.io.

answered Jan 23, 2013 at 22:02

Ben Felda

1,48210 silver badges16 bronze badges

Collectives™ on Stack Overflow

Connect Models in Angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related