The AngularJS controller does not seem to be defined properly and is showing as undefined

Hi there, I am completely new to using Angular. I am attempting to insert some predefined data into a table, but I keep encountering 2 errors when I attempt to do so: 1. Uncaught ReferenceError: LookUpCtrl is not defined 2. Error: [ng:areq] Argument 'lookup.controller' is not a function, got undefined

This is the code for 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'
        }
    ];

}
}());

This is the content of 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>

Feel free to ask if you need any additional information. Thank you.

Answer №1

There seems to be a small error in your code:

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

function LookupCtrl() {}; //Make sure to use camel case for the function name.

The corrected code should read as follows:

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

Answer №2

It seems like the initialization is not being called correctly. While it may be possible to create a controller without $scope, I recommend using it for consistency. Here is how I typically initialize an angular controller. Instead of passing the function as an argument like I did, you can define it earlier.

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'
        }
    ];
}]); 

Don't forget to include

<tr ng-repeat="result in results">
in your HTML.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Monitor the x and y positions for platformer game interactions using only JavaScript and jQuery

I am currently working on a 2D platformer game as part of my college project alongside my friends. We are using jQuery and pure JS for development. So far, we have been able to move the character left and right using jQuery's animate function, and ena ...

There seems to be a problem with the formatting in "{{start_time | date:'HH:mm'}}". I am receiving a warning message and the formatting is not applying correctly

Encountering a warning message indicating that the format is not being displayed correctly in the input field. The value "{{start_time | date:'HH:mm'}}" does not match the required format. It should be in the form of "HH:mm", "HH:mm:ss", or "H ...

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

Effective ways to resolve the ajax problem of not appearing in the console

I am facing an issue with my simple ajax call in a Java spring boot application. The call is made to a controller method and the returned value should be displayed in the front-end console. However, after running the code, it shows a status of 400 but noth ...

How to configure intellisense for a webpack bundle in an ASP.NET Core project

In my development process, I utilize webpack to transpile Typescript code into Javascript and combine it into a single Javascript file. This consolidated file is then incorporated into all of my asp.net core views. While the bundled code runs smoothly, unf ...

In JavaScript, the HTML <select> onclick event is fired when the down button of the scrollbar is clicked

I have encountered a problem while trying to use the onclick() event of the Select object. The function is triggered and executes correctly, but it also gets executed when clicking on the scroll bar's down button. This results in users not being able ...

Can a VS Code theme extension be designed using JavaScript or TypeScript rather than JSON?

Currently working on a VS Code theme extension, I am interested in exploring the possibility of using JavaScript or TypeScript files instead of a JSON file. The idea of having all the theme information crammed into one massive JSON file feels disorganize ...

Struggling to incorporate pagination with axios in my code

As a newcomer to the world of REACT, I am currently delving into the realm of implementing pagination in my React project using axios. The API that I am utilizing (swapi.dev) boasts a total of 87 characters. Upon submitting a GET request with , only 10 cha ...

Several buttons sharing the same class name, however, only the first one is functional

As a newcomer to JavaScript, I am currently working on the front-end of a basic ecommerce page for a personal project. My query pertains to the uniformity of all items being displayed on the page, except for their names. When I click on the "buy" button f ...

"Encountering an Error in Linq Query Due to Union Operator Usage

Integrating a WCF service into an AngularJS web application has presented a challenge. With two tables in the database, the goal is to join their records into a single record for display in the AngularJS application. When both tables have records, retrieva ...

Error: Attempting to access the 'toString' property of an undefined object is not permitted (apex-charts)

While working on a personal project, I considered using apexcharts. However, an error shown in the image kept popping up. It seemed to disappear when I set the width and height properties in the Chart component or when the site was in production. Currently ...

ngAnimateSwap - animations do not function as intended when boolean expressions are utilized

I adapted the original ngAnimateSwap demonstration from the AngularJS documentation to utilize a boolean expression for triggering the slide animation. Initially, I anticipated the banner to switch back and forth between 'true' and 'false&a ...

No overload error encountered with TypeScript function call

I am working on an async function that communicates with the backend and I need it to handle axios error messages. My goal is to display these messages in a form. export async function register( prevState: string | undefined, formData: FormData ) { t ...

Remove an item from a multidimensional array that contains a specific key-value pair

I need to remove the low-level object (for example, in the code below, under personal data there are two objects, I want to delete the one where action is "OLD") under each section where the "action" is "OLD" I'm utilizing lodash in my current projec ...

Creating repeatable texture patterns in Three.js

Hello, I have developed a basic renderer for my 3D objects that are generated using PHP. While I am able to successfully render all the objects, I am facing some major issues with textures. Currently, the texture I am using is sized at 512x512 pixels. I ...

Develop an ASP.NET server control that is compatible with a wide range of browsers

What steps can I take to ensure that my asp.net control is cross browser compatible? Currently, it only works with IE. I would appreciate any recommendations and best practices on achieving this. ...

Could the `<script src="show.js"></script>` code pose a threat?

Upon delivering a webpage, a software engineer included the subsequent line of code towards the end: <script src="show.js"></script> We are uncertain if adding this code to our webpage poses any risks. What could be the legitimate reason behi ...

searching for trees recursively in JavaScript

I am trying to develop a function that can search through an array containing nested arrays to find a specific node with information, similar to navigating a tree structure. const data = [ { id: '1-1', name: "Factory", children: [ ...

Tips for retrieving the ID of a dynamic page

In my Higher Order Component (HOC), I have set up a function that redirects the user to the login page if there is no token. My goal is to store the URL that the user intended to visit before being redirected and then push them back to that page. However, ...

I'm having trouble getting EJS files to run JavaScript module scripts

I am facing an issue with my ejs file running on localhost. I am trying to execute functions from other files that are imported with js. In the ejs file, there is a module script tag which successfully executes the code of the file specified in the src att ...