AngularJS controller is not a function, got undefined

Question

Hi I am brand new to angular. I'm just trying to add some hardcoded data to a table, and I'm getting 2 errors when I try to do it. 1. Uncaught ReferenceError: LookUpCtrl is not defined 2. Error: [ng:areq] Argument 'lookup.controller' is not a function, got undefined

Here is my controller lookup.controller.js

(function () {

'use strict';

angular
    .module('crm.ma')
    .controller('LookUpCtrl', LookUpCtrl);

function LookupCtrl() {
    var vm = this;

    vm.results = [
        {
            accountId: 1,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        },
        {
            accountId: 2,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        }
    ];

}
}());

Here's my view lookup.html

<div>
<div>Lookup Results</div>
<table>
    <thead>
        <tr>
            <td>Acc. ID</td>
            <td>Acc. Name</td>
            <td>Acc Address</td>
            <td>City</td>
            <td>Zip</td>
            <td>Phone</td>
            <td>Parent Name</td>
            <td>Account Type</td>
            <td>Account Status</td>
            <td>Credit Term</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="result in vm.results">
            <td>{{ result.accountId }}</td>
            <td>{{ result.accountName }}</td>
            <td>{{ result.address }}</td>
            <td>{{ result.city }}</td>
            <td>{{ result.state }}</td>
            <td>{{ reuslt.zip }}</td>
            <td>{{ result.phone }}</td>
            <td>{{ result.parentName }}</td>
            <td>{{ result.accountType }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.creditTerm }}</td>
        </tr>
    </tbody>
</table>

if any further information is needed please let me know. Thanks.

have you tried moving angular .module('crm.ma') .controller('LookUpCtrl', LookUpCtrl); after the LookUpCtrl definition? This should fix one error but not the other. It's the first time i see a controller defined this way — valepu
– valepu, Commented Oct 2, 2015 at 19:14
Try declaring your function before calling angular.controller perhaps? — CollinD
– CollinD, Commented Oct 2, 2015 at 19:14
Its very unclear what you are asking...the code which you have added is not relating with what you are asking.. — Pankaj Parkar
– Pankaj Parkar, Commented Oct 2, 2015 at 19:16
@CollinD That got rid of the error Uncaught ReferenceError: LookUpCtrl But I am still getting no data displayed in my table. And I still get the error message Error: [ng:areq] Argument 'lookup.controller' is not a function, got undefined — hollyquinn
– hollyquinn, Commented Oct 2, 2015 at 19:19
@PankajParkar Why even respond? What further information do you need? — hollyquinn
– hollyquinn, Commented Oct 2, 2015 at 19:20

taxicala · Accepted Answer · 2015-10-02 19:27:33Z

2

You have a typo:

angular
    .module('crm.ma')
    .controller('LookUpCtrl', LookUpCtrl); //This should be LookupCtrl, as your function name is "LookupCtrl"

function LookupCtrl() {}; //Check the camelcase name.

So, the correct code would be:

angular
    .module('crm.ma')
    .controller('LookUpCtrl', LookupCtrl);

edited Oct 2, 2015 at 19:27

answered Oct 2, 2015 at 19:24

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

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

2 Comments

hollyquinn Over a year ago

taxicala thank you so much. I can't believe it was a stupid typo. You are my hero.

taxicala Over a year ago

No problem, glad to help! :) for the record, no one is safe from typos ;)

valepu · Accepted Answer · 2015-10-02 19:59:47Z

You aren't calling the initialization properly. I don't know if it's possible to make a controller without $scope but i suggest you to use it. This is how to i usually initialize an angular controller. You can safely define the function earlier instead of passing it as argument like i did though

var app = angular.module('crm.ma', []).controller('LookUpCtrl', ['$scope', function($scope){   
$scope.results=[ 
        {    
            accountId: 1,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        },
        {
            accountId: 2,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        }
    ];
}]);

remember to use <tr ng-repeat="result in results"> in your html

Collectives™ on Stack Overflow

AngularJS controller is not a function, got undefined

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related