I'm encountering the error message "Controller not a function, received undefined" even though I have not declared the controller globally

Encountering the same ERROR

Argument 'AveragesCtrl' is not a function, got undefined
. Despite attempting various solutions found on SO, I am still unable to resolve this issue. Any insights into what might be causing my error?

<div >

    <div ng-controller="AveragesCtrl">

    <table>
      <tr ng-repeat="actor in avengers.cast">
        <td>{{actor.name}}</td>
        <td>{{actor.character}}</td>
      </tr>
    </table>

  </div>

  </div>

JS

var myApp  = angular.module("myApp", []);

    myApp.factory('Averages', function () {

        var Avengers = {};
        Avengers.cast = [
          {
            name: "Robert Downey Jr.",
            character: "Tony Stark / Iron Man"
          },
          {
            name: "Chris Evans",
            character: "Steve Rogers / Captain America"
          },
          {
            name: "Mark Ruffalo",
            character: "Bruce Banner / The Hulk"
          }, 
          ...
          // list of Avengers characters truncated for brevity
          ...   
          
        ];
        return Avengers;
    });



    myApp.controller("AvengersCtrl", function AvengersCtrl(Avengers) {
      var avengersCtrl = this;
        avengersCtrl.avengers = Avengers;
    }); 

Answer №1

There seems to be no controller named AveragesCtrl

You have declared a controller named AvengersCtrl

Please make the following conversion:

<div ng-controller="AveragesCtrl">

Change it to:

<div ng-controller="AvengersCtrl">

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

Activate the element only when all input fields are completed. This function can be used repeatedly

I am working on developing a versatile function that will iterate through all input fields. If any of these fields are empty, I want to trigger the toggling of a class name (disabled) on another element (such as an anchor or button). Currently, the functi ...

Add the useState hook from React to an array

Hey there, I need some help with my code. I am trying to add an element to my array, but it's not working as expected. Can you take a look at what I have written below? const [datesState, setDisabledData] = useState([ format(new Date(2021, 4, 1) ...

The command 'var' is not recognized as an internal or external command within npm

I need assistance with installing the histogramjs package. The command npm i histogramjs successfully installs it, but when I attempt to run the code using var hist = require('histogramjs'), I encounter an error in the command prompt: 'var& ...

Utilize jQuery method in HTML to perform parsing operation

Is it possible to invoke my jQuery function from within my HTML code? Here is the code snippet: HTML section: <td style="text-align:left;" align="left" > <div id="bulletin-timestamp" > doTimeStamp(${bulletinTimeStamp[status.index ...

Is there a way to prevent items in Dropbox from being selected?

Here is an example of my HTML element: <select class="form-control" ng-model="current.data.sites" ng-options="item.Id as item.Description for item in current.lookups.siteReg | filterByIdArray: current.data.sites"> <option value="">--Data-- ...

Looking to enhance code readability using regular expressions

While I am not a programmer, I enjoy exploring and learning new things. Here is what I have: 1) My URL is structured like this: http://site.com/#!/show/me/stuff/1-12/ 2) I have a jQuery pagination script that displays the number of available pages. Each ...

What is the best way to remove a border piece with CSS?

Currently, I'm attempting to achieve a matrix effect purely through HTML and CSS. One method I have come across involves applying a solid border and then removing certain parts at the top and bottom. Does anyone know if it's possible to create th ...

Retrieve the Checked Value of a Checkbox Using Ajax Post in MVC

Can anyone provide assistance? This is the code I am working with: Index.cshtml <!DOCTYPE html> <html> <head> <title>jQuery With Example</title> @Scripts.Render("~/bundles/jquery") <script type="text/javascri ...

React-router-dom v6 causing MUI Drawer to not render

I have implemented ReactJS and I am working on incorporating a drawer/menu to display different routes on each page. I have set up the routes using react-router-dom@v6 in my index.js file. When I directly enter the URL for a specific page, I can see the co ...

Utilizing a dropdown list in HTML to dynamically change images

On my HTML page, I have implemented a dropdown list box. My objective is to change an image and update a label based on the selection made from the dropdown list box. I already have an array called 'temp' which represents the number of items. The ...

JS similar to yield*: async generator

Attempting to write a recursive async generator function, I hit a roadblock when I realized I am unsure of the syntax for yield* in the context of an async generator. In a conventional generator function, I can utilize yield* to yield all values from anot ...

Attempting to iterate through the div in order to collect all of the checkboxes and assign a label to each one

I am attempting to modify a piece of JavaScript code in order to locate all checkboxes, assign names to them, and then add label attributes with CSS for accessibility purposes. Here is the snippet of my existing code: <tr class="el-table__row" ...

Importing components in real-time to generate static sites

My website has a dynamic page structure with each page having its unique content using various components. During the build process, I am statically pre-rendering the pages using Next.js' static site generation. To manage component population, I have ...

AngularJS $filter for searching and returning a specific item based on its unique identifier

Currently, I am attempting to search for a specific item within an array based on its ID. The ID is extracted from the URL, and I have tried using $filter method to achieve this. Below is the code snippet I have been working with: $filter('filter&ap ...

Tips for navigating an Angular JS web application

I am currently attempting to crawl a web application that presents login as the initial obstacle, and is constructed using AngularJS. My approach involved employing Scrapy and Selenium for crawling the website; however, I encountered an issue with the logi ...

"Auth.currentSession is indicating that there is no user currently logged in

I am currently working on a basic React app with authentication using aws-amplify. My user pool is set up in Cognito and I can successfully redirect the user to the hosted UI for login. However, when trying to retrieve the current session, I am receiving a ...

What is the best way to apply index-based filtering in Angular JS?

I am working on a tab system using ng-repeat to display tabs and content, but I'm facing some challenges in making it work seamlessly. Below are the tabs being generated: <ul class="job-title-list"> <li ng-repeat="tab in tabBlocks"> ...

Looking to pass a confidential input parameter to a MVC controller via AngularJS

I'm trying to figure out how to pass a hidden input field value to my MVC controller. $http({ method: 'GET', url: '/User/GetProjectsList' }) .success(function (data, status, headers, config) { $scope.workflow = []; ...

Is there a way to instruct Google to include my site in its index using Angular.js?

I am currently working on an angular.js app and have been following Google's guide for ajax-based applications. Here are the steps I have taken: Added meta tags <base href="/"> <meta name="fragment" content="!"> Configured angular.js ...

Exploring the dynamic duo of Django and DataTables: a guide on incorporating

Have you cautiously attempted to fetch data using AJAX, and displaying it in a datatable works seamlessly, but the issue arises when attempting to search or sort within the table. It seems that upon doing so, the data is lost, necessitating a page reload. ...