AngularJS-Controller-HTTP.md

*** Please note: This Gist is not finished and currently the unit test fails ***

SampleListItemsController

Basic example of doing an AJAX call when the controller is loaded.

The use case for this is any dynamic list page, such as displaying all items for sale in an online store.

** The big deal here is showing multiple ways to structure the Controller with the variables and dependency injection. Some people, like myself, learn by contrast (seeing different ways to achieve the same result). **

Sample A1

Add description here

Sample A2

Add description here

Sample B1

Add description here

sampleListItemsController.js

'use strict';

angular.module('Sample.Controllers', [])
.controller('SampleListItemsController', function($rootScope, $scope, $http, $location) {
    /*
     * Assumes that the AJAX call returns an array of values.
     */
    console.log('SampleListItemsController()');

    $scope.myItems = null;
    $http.get('http://my-api.herokuapp.com/api/v1/item/').
    success(function(data, status, headers, config) {
        console.log('Data: ' + angular.toJson(data));
        $scope.myItems = data.myItems;
        if ($scope.myItems.length > 0) {
            console.log('Returned ' + $scope.myItems.length + ' items');
        } else {
            console.log('No items exist yet');
        }
        console.log('End HTTP success()');
    }).
    error(function(data, status, headers, config) {
        $scope.logAjaxError(data, status, headers, config);
    });
});

sampleListItemsControllerSpec.js

'use strict';

describe('Sample Controllers', function() {

    var myItemsData;

    beforeEach(function() {
        module('Sample.Controllers');

        myItemsData = {
                    "myItems": [
                        {"name": "item one"},
                        {"name": "item two"}
                    ]
                };
    });

    describe('SampleHttpGetController-A1', function() {
        var GET_URL = 'http://my-api.herokuapp.com/api/v1/item/';

        var controller;
        var scope;

        this.$controller;
        this.$httpBackend;

        beforeEach(inject(function($controller, $rootScope, $httpBackend) {
            this.$controller = $controller;
            this.$httpBackend = $httpBackend;
            scope = $rootScope.$new();
            $httpBackend.when('GET', GET_URL).respond(myItemsData);

            // NB: This controller has a $http.get() in its main function, so simply instantiating it queues up a request
            controller = $controller('SampleListItemsController', {
                $scope: scope
            });
        }));

        it('should have a SampleListItemsController controller', function() {
            expect(controller).toBeDefined();
        });

        it('should default my items to null', function() {
            console.log('Unit Test > myItems: ' + angular.toJson(scope.myItems));
            expect(scope.myItems).toEqual(null);
        });

        it('should fetch my items', function() {
            this.$httpBackend.expectGET(GET_URL);
            console.log('$controller: ' + this.$controller);
            var itController = this.$controller('SampleListItemsController', {
                $scope: scope
            });
            console.log('itController: ' + angular.toJson(itController));
            console.log('scope.myItems: ' + angular.toJson(scope.myItems));
            // Cause $http to return the response for the request we queued up
            this.$httpBackend.flush();
            console.log('Unit Test > myItems: ' + angular.toJson(scope.myItems));
            expect(scope.myItems).toBeDefined();

            this.$httpBackend.verifyNoOutstandingExpectation();
            this.$httpBackend.verifyNoOutstandingRequest();
        });
    });

    describe('SampleHttpGetController-A2', function() {
        var GET_URL = 'http://my-api.herokuapp.com/api/v1/item/';

        var controller;
        var scope;
        var _$controller;
        var _$httpBackend;

        beforeEach(inject(function($controller, $rootScope, $httpBackend) {
            _$controller = $controller;
            _$httpBackend = $httpBackend;
            scope = $rootScope.$new();
            $httpBackend.when('GET', GET_URL).respond(myItemsData);

            // NB: This controller has a $http.get() in its main function, so simply instantiating it queues up a request
            controller = $controller('SampleListItemsController', {
                $scope: scope
            });
        }));

        it('should have a SampleListItemsController controller', function() {
            expect(controller).toBeDefined();
        });

        it('should default my items to empty', function() {
            console.log('Unit Test > myItems: ' + angular.toJson(scope.myItems));
            expect(scope.myItems).toEqual(null);
        });

        it('should fetch my items when initialized', function() {
            _$httpBackend.expectGET(GET_URL);
            console.log('$controller: ' + _$controller);
            var itController = _$controller('SampleListItemsController', {
                $scope: scope
            });
            console.log('itController: ' + angular.toJson(itController));
            console.log('scope.myItems: ' + angular.toJson(scope.myItems));
            // Cause $http to return the response for the request we queued up
            _$httpBackend.flush();
            console.log('Unit Test > myItems: ' + angular.toJson(scope.myItems));
            expect(scope.myItems).toBeDefined();

            _$httpBackend.verifyNoOutstandingExpectation();
            _$httpBackend.verifyNoOutstandingRequest();
        });
    });

    describe('SampleHttpGetController-B1', function() {
        var GET_URL = 'http://my-api.herokuapp.com/api/v1/item/';

        var controller;
        var scope;
        var $httpBackend;
        var $controller;

        beforeEach(inject(function($injector) {
            $controller = $injector.get('$controller');
            $httpBackend = $injector.get('$httpBackend');
            scope = $injector.get('$rootScope').$new();
            $httpBackend.when('GET', GET_URL).respond(myItemsData);

            // NB: This controller has a $http.get() in its main function, so simply instantiating it queues up a request
            controller = $controller('SampleListItemsController', {
                $scope: scope
            });
        }));

        it('should have a SampleListItemsController controller', function() {
            expect(controller).toBeDefined();
            $httpBackend.flush();
        });

        it('should default my items to null', function() {
            console.log('Unit Test > myItems: ' + angular.toJson(scope.myItems));
            expect(scope.myItems).toEqual(null);
        });

        it('should fetch my items', function() {
            $httpBackend.expectGET(GET_URL);
            console.log('$controller: ' + $controller);
            var itController = $controller('SampleListItemsController', {
                $scope: scope
            });
            console.log('itController: ' + angular.toJson(itController));
            console.log('scope.myItems: ' + angular.toJson(scope.myItems));
            // expect(scope.myItems).toBeUndefined();
            // Cause $http to return the response for the request we queued up
            $httpBackend.flush();
            console.log('Unit Test > myItems: ' + angular.toJson(scope.myItems));
            expect(scope.myItems).toBeDefined();

            $httpBackend.verifyNoOutstandingExpectation();
            $httpBackend.verifyNoOutstandingRequest();
        });
    });

});