Angular JS error with factories - angularjs

Question

I'm attempting to understand how factories work and have hit a road block. I'm following along with this guide on page 88 or so.
Running my code results in these console errors.
TypeError: Cannot read property 'getData' of undefined
<div ng-app="timeEntry">
<div ng-controller="timeEntryController">
<p class="lead">Factory Test</p>
<p>**** {{testing}}</p>
<p>******** {{testing2}}</p>
</div>
</div>
var timeEntry = angular.module('timeEntry', []);
timeEntry.controller('timeEntryController', ['$scope', function ($scope, loadData) {
$scope.testing = 'test';
$scope.testing2 = loadData.getData();
}]);
timeEntry.factory('loadData', function ($http) {
var test = 'test data';
var factory = {};
factory.getData = function () {
return test;
};
return factory;
});
JS Fiddle http://jsfiddle.net/dgdavidson/QPc3j/2/
I'm sure that the error will be frightfully obvious, but I don't know what it is.

Answer 1

You need to add the string 'loadData' to your declaration:
So change this:
timeEntry.controller('timeEntryController', ['$scope', function ($scope, loadData) {
to:
timeEntry.controller('timeEntryController', ['$scope', 'loadData', function ($scope, loadData) {
(updated fiddle)
The error you're seeing is because Angular is passing undefined into loadData. And, of course, undefined has no property getData.
This is such an easy/common mistake that some people skip manually declaring the strings and use ngMin to do it for them (for instance adding it to your grunt file). This allows you to then use the following style of declaration where you don't have to ensure strings match parameters:
timeEntry.controller('timeEntryController', function ($scope, loadData) {