AngularJS CRUD Grid v2: Now using $resource instead of $http

2013-07-30

In V1 of my AngularJS, WebApi grid I used $http to call my WebApi endpoints. I’ve been using $resource a lot lately, so I thought I’d go back and update it to use $resource instead.

Here’s what it looks like:

SOURCE: https://github.com/jongio/AngularJS-WebApi-EF

Here’s how I wired up resource:

1. Reference angular-resource.js

2. Inject ngResource into the app

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

3. Modify the personFactory to return a resource object instead of the individual $http calls.

app.factory('personFactory', function ($http, $resource) &#123;
    return $resource('api/person/:id',
        &#123; id: '@@id' &#125;,
        &#123; 'update': &#123; method: 'PUT' &#125; &#125;,
        &#123; 'query': &#123; method: 'GET', isArray: false &#125; &#125;);
&#125;);

4. Modify the $scope methods to use the resource methods, save, delete, query, update:

$scope.addPerson = function () &#123;
    personFactory.save($scope.person, successPostCallback, errorCallback);
&#125;;

Here’s the entire view. I’ll refactor it later.

<!doctype html>
<html ng-app="app">
<head>
    <title>AngularJS-WebApi-EF</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/toastr")
    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/content/bootstrap")
    @Styles.Render("~/content/toastr")
</head>
<body>
    <div ng-controller="IndexCtrl" ng-cloak>
        <table class="crud-grid table table-striped table-bordered table-condensed table-hover">
            <tr>
                <th style="width: 100px;">
                    <div class="btn-toolbar"><i class="btn icon-plus" ng-click="toggleAddMode()"></i></div>
                </th>
                <th style="width: 50px;">Id</th>
                <th>Name</th>
            </tr>
            <tr ng-show="addMode">
                <td>
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <i class="btn icon-save" ng-click="addPerson()"></i>
                            <i class="btn icon-remove" ng-click="toggleAddMode()"></i>
                        </div>
                    </div>
                </td>
                <td></td>
                <td>
                    <input ng-model="person.Name" />
                </td>
            </tr>
            <tr ng-repeat="person in people | orderBy:'Id':true">
                <td>
                    <div class="btn-toolbar" ng-show="person.editMode == null || person.editMode == false">
                        <div class="btn-group">
                            <i class="btn icon-edit" ng-click="toggleEditMode(person)"></i>
                            <i class="btn icon-trash" ng-click="deletePerson(person)"></i>
                        </div>
                    </div>
                    <div class="btn-toolbar" ng-show="person.editMode == true">
                        <div class="btn-group">
                            <i class="btn icon-save" ng-click="updatePerson(person)"></i>
                            <i class="btn icon-remove" ng-click="toggleEditMode(person)"></i>
                        </div>
                    </div>
                </td>
                <td></td>
                <td>
                    <span ng-show="person.editMode == null || person.editMode == false"></span>
                    <input ng-model="person.Name" ng-show="person.editMode == true" />
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        var app = angular.module('app', ['ngResource']);

        app.factory('personFactory', function ($http, $resource) &#123;
            return $resource('api/person/:id',
                &#123; id: '@@id' &#125;,
                &#123; 'update': &#123; method: 'PUT' &#125; &#125;,
                &#123; 'query': &#123; method: 'GET', isArray: false &#125; &#125;);
        &#125;);

        app.factory('notificationFactory', function () &#123;
            return &#123;
                success: function () &#123;
                    toastr.success("Success");
                &#125;,
                error: function (text) &#123;
                    toastr.error(text, "Error");
                &#125;
            &#125;;
        &#125;);

        app.controller('IndexCtrl', function ($scope, $q, personFactory, notificationFactory) &#123;
            $scope.people = [];
            $scope.addMode = false;

            $scope.toggleAddMode = function () &#123;
                $scope.addMode = !$scope.addMode;
            &#125;;

            $scope.toggleEditMode = function (person) &#123;
                person.editMode = !person.editMode;
            &#125;;

            var successCallback = function (e, cb) &#123;
                notificationFactory.success();
                $scope.getPeople(cb);
            &#125;;

            var successPostCallback = function (e) &#123;
                successCallback(e, function () &#123;
                    $scope.toggleAddMode();
                    $scope.person = &#123;&#125;;
                &#125;);
            &#125;;

            var errorCallback = function (e) &#123;
                notificationFactory.error(e.data.Message);
            &#125;;

            $scope.addPerson = function () &#123;
                personFactory.save($scope.person, successPostCallback, errorCallback);
            &#125;;

            $scope.deletePerson = function (person) &#123;
                personFactory.delete(&#123; id: person.Id &#125;, successCallback, errorCallback);
            &#125;;

            $scope.updatePerson = function (person) &#123;
                personFactory.update(&#123; id: person.Id &#125;, person, successCallback, errorCallback);
            &#125;;

            $scope.getPeople = function (cb) &#123;
                personFactory.query(function (data) &#123;
                    $scope.people = data;
                    if (cb) cb();
                &#125;);
            &#125;;

            $scope.getPeople();
        &#125;);
    </script>
</body>
</html>

TechTutorials