Adding Accounts to the AngularJS Mobile Pack

1) Follow the getting started instructions for AngularHerokuBootstrapPHP.
http://www2.developerforce.com/mobile/getting-started/html5/#angularjs-heroku

2) Update the app definition (in Index.php)  -- replace this line near the top of the script section in index.php

var app = angular.module('AngularSFDemo', ['AngularForce', 'AngularForceObjectFactory', 'Contact', 'Account']);

3) Update routes (app.js) -- add this line to the "routes" declaration at the top.

when('/accounts', {controller: AccountListCtrl, templateUrl: 'partials/account/list.html'}).

4) Create a new module -- (app.js) -- add this section under the "Contact" declaration.

angular.module('Account', []).factory('Account', function (AngularForceObjectFactory) {
    var Account = AngularForceObjectFactory({type: 'Account'});
    return Account;
});

5) Add a controller (bottom of App.js) -- scroll to the bottom, paste right in.

function AccountListCtrl($scope, AngularForce, $location, Account) {
    $scope.authenticated = AngularForce.authenticated();
    if (!$scope.authenticated) {
        return $location.path('/login');
    }

    Account.query(function (data) {
            $scope.accounts = data.records;
            $scope.$apply();//Required coz sfdc uses jquery.ajax
        }, function (data) {
            alert('Query Error');
        }, 'Select Id, Name, BillingCity From Account Order By Name Limit 50');
}

6) Create a partial for the new accounts list.

Insert partial
--Create a new directory "partials/account"
--Create the file "partials/account/list.html"

<table width="80%" class="table">
    <thead>
    <tr>
        <th class='hidden-phone'>Id</th>
        <th>Name</th>
        <th>BillingCity</th>
    </tr>
    </thead>
    <tbody>

    <tr ng-repeat="current in accounts">
        <td class='hidden-phone'>{{current.Id}}</td>
        <td><a href="#/view/{{current.Id}}">{{current.Name}}</a></td>
        <td>{{current.BillingCity}}</td>
    </tr>
    </tbody>
</table>


7) Update the home.html page by adding this link underneath the "Contacts" link.

<p><a href="#/accounts">Accounts</a></p>

8) You'll need to add this to the local git repo, and then push to Heroku.

git add .
git commit -m"accounts"
git push heroku master

When you deploy, you'll need to login.  Click on the "Salesforce Contacts" link at the top, and then click on the new "Accounts" link.