Encountering a problem with AngularJS - receiving the [ng:areq] error, for more information visit http://errors.angularjs.org/1.3.2/ng/areq

While working on my CRUD angularApp, I encountered a strange error in Chrome dev tools. Here is the complete error message:

error: [ng:areq] http://errors.angularjs.org/1.3.2/ng/areq?p0=DbController&p1=not%20a%20function%2C%20got%20string
at angular.js:38
at Nb (angular.js:1577)
at ob (angular.js:1587)

I have checked DbController thoroughly but couldn't find any issues. All references to DbController are provided below.

Index.php

<html ng-app="crudApp">
...  <!-- stylesheet and scripts added -->
<body>
<div class="container wrapper" ng-controller="DbController">
...

script.js

    // Application module
var crudApp = angular.module('crudApp', []);
crudApp.controller("DbController", ['$scope', '$http', function($scope, $http) {

    // Function to fetch employee details from the database
    getInfo();

    function getInfo() {
        // Sending request to EmpDetails.php files
        $http.post('databaseFiles/empDetails.php').success(function(data) {
            // Storing the returned data into scope
            $scope.details = data;
        });
    }

    $scope.insertInfo = function(info) {
        $http.post('databaseFiles/insertDetails.php', {
            "name": info.name,
            "email": info.email,
            "address": info.address,
            "gender": info.gender
        }).success(function(data) {
            if (data == true) {
                getInfo();
                // Hide details insertion form
                $('#empForm').css('display', 'none');
            }
        });
    };

    $scope.currentUser = {};
    $scope.editInfo = function(info) {
        $scope.currentUser = info;
        $('#empForm').slideUp();
        $('#editForm').slideToggle();
    };

    $scope.UpdateInfo = function(info) {
        $http.post('databaseFiles/updateDetails.php', {
            "id": info.emp_id,
            "name": info.emp_name,
            "email": info.emp_email,
            "address": info.emp_address,
            "gender": info.emp_gender
        }).success(function(data) {
            $scope.show_form = true;
            if (data == true) {
                getInfo();
            }
        });
    };

    $scope.deleteInfo = function(info) {
        $http.post('databaseFiles/deleteDetails.php', {
            "del_id": info.emp_id
        }).success(function(data) {
            if (data == true) {
                getInfo();
            }
        });

    };
}]);

If you notice any issue with the DBController code, please do let me know.

Answer №1

Your controller definition is facing a syntax issue. The correct format should be as follows:

crudApp.controller("DbController", ['$scope', '$http', function($scope, $http) {
  ...
}]);

An even better approach would be:

crudApp.controller("DbController", DbController);
DbController.$inject = ["$scope", "$http"];
function DbController($scope, $http) {
  ...
}

Answer №2

I have implemented some modifications to your controller and it now functions properly with the provided code

// Application module
var crudApp = angular.module('crudApp', []);
crudApp.controller("DbController", ['$scope', '$http', function($scope, $http) {

    // Function to retrieve employee details from the database
    getInfo();

    function getInfo() {
        // Sending a request to EmpDetails.php files
        $http.post('databaseFiles/empDetails.php').success(function(data) {
            // Storing the returned data in the scope
            $scope.details = data;
        });
    }

    $scope.insertInfo = function(info) {
        $http.post('databaseFiles/insertDetails.php', {
            "name": info.name,
            "email": info.email,
            "address": info.address,
            "gender": info.gender
        }).success(function(data) {
            if (data == true) {
                getInfo();
                // Hiding the details insertion form
                $('#empForm').css('display', 'none');
            }
        });
    };

    $scope.currentUser = {};
    $scope.editInfo = function(info) {
        $scope.currentUser = info;
        $('#empForm').slideUp();
        $('#editForm').slideToggle();
    };

    $scope.UpdateInfo = function(info) {
        $http.post('databaseFiles/updateDetails.php', {
            "id": info.emp_id,
            "name": info.emp_name,
            "email": info.emp_email,
            "address": info.emp_address,
            "gender": info.emp_gender
        }).success(function(data) {
            $scope.show_form = true;
            if (data == true) {
                getInfo();
            }
        });
    };

    $scope.deleteInfo = function(info) {
        $http.post('databaseFiles/deleteDetails.php', {
            "del_id": info.emp_id
        }).success(function(data) {
            if (data == true) {
                getInfo();
            }
        });

    };
}]);

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

Is it feasible to implement multiple selection columns in ng-grid, such as columns with checkboxes and radio buttons?

I'm in the process of building a table utilizing ng-grid (still learning about angularjs and ng-grid). The table should have the following columns: A column for checkbox selection. A column for radio button selection. Additional columns for data. H ...

Adding a version number to the splash screen in Cordova: A step-by-step guide

After successfully integrating the Cordova Splashscreen plugin into my Ionic project, everything is running smoothly. However, I am now looking to dynamically add a version number to the splash screen without manually editing the Splash Screen PNG file e ...

Tips for ensuring a custom menu closes when clicking outside of it instead of on the menu itself

Building off a recent inquiry, I am aiming to have my menu close whenever I click outside of it. At the moment, clicking the "Hamburger Menu Button" opens and closes the menu. It will also close when I click a link on the menu or the menu itself. However, ...

ng-required is ineffective when used with number inputs that have a minimum value requirement

In my form, I have implemented a checkbox that, when checked, toggles the visibility of a div using AngularJS's ng-show. Within this div, there is an input field of type "number" with a validation setting of min="10000". I am trying to prevent the f ...

How to display a div in Angular when hovering with ElementRef and Query List

I am having trouble implementing a ngFor loop in my project where I want to display a div on mouse hover using the @Input notation. This is how my HTML code looks: <div class="col s12 m6" style="position: relative" *ngFor="let res of hostInfo.resident ...

Tips for updating the id of a tag using JavaScript?

Html Code:- {% for post in posts %} <article class="media content-section"> <div class="media-body"> <h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}&l ...

How to use a string condition to filter a list of objects in Javascript?

Below is the structure of the object: var objList = [ { "age": 19, "valueField": 34, "booleanField": false }, { "age": 15, "valueField": 5, "booleanField": false }, { "age": 22, "valueField": 17, "booleanField": true } ]; Given the condition ...

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

I've been struggling for nearly a whole day and could really use some assistance. I'm having trouble understanding how chat web apps manage to work around this particular issue. There have been numerous forum posts discussing the problem: I am tr ...

The typescript error TS2339 is triggered by the property 'webkitURL' not being found on the 'Window' type

Currently utilizing Angular 2 in a project that is compiled with TypeScript. Encountering an issue when attempting to generate a blob image: Error TS2339: Property 'webkitURL' does not exist on type 'Window' The TypeScript code causi ...

Using CSS in combination with AngularJS, you can create a dynamic growth effect for a div element that initially

I am currently using AngularJS to dynamically add divs to a section. My goal is to have each div start with a static width and then grow dynamically as I continue to add more divs. How can I achieve this? The following code is not producing the desired re ...

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

I am currently working on creating an animation for a collapsible box (accordion). My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the pa ...

What is the best way to separate my Webpack/Vue code into a vendor.js file and exclude it from app.js?

My plan is to create two separate files, vendor.js and app.js, for my project. In this setup, vendor.js will contain the core code for Webpack and Vue.js, while app.js will solely focus on the Vue.js code specific to my application. To streamline this proc ...

Generating numerous checkboxes dynamically

Seeking assistance with a jQuery function that dynamically generates or clones checkboxes. The challenge is to display the sub_item checkbox when the main_item checkbox is checked. For a demonstration, you can visit this DEMO Jquery $('#btnAdd' ...

What are the ways in which Angular can offer assistance to Internet Explorer 9?

The news is out - the Angular team has just announced their support for Internet Explorer 9! This revelation has left me wondering, how is it even possible? Currently, I am an avid user of AngularJS and have dedicated time to studying its ins and outs. Fr ...

Can values from a dgrid store be saved in a variable or displayed in the console?

Currently, I am utilizing the dgrid store to display a grid (dgrid 0.4) on my website. Below is the code snippet that I have implemented: require([ 'dojo/_base/declare', 'dojo/Deferred', 'dstore/RequestMemory', ...

What is the best method for storing objects in Firebase in order to easily rearrange them at a later time?

My list looks something like this: {"ids": [ { "id1": { "name": "name1", "lastname": "lastname1" } }, { "id2": { "name": "name2", "lastname": "lastname2" } }, { "id3": { "name": "name3", "l ...

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

Filtering out any inappropriate characters from the XML data before processing it with the XMLSerializer function

I am currently working on a solution to store user-input in an XML document using client-side JavaScript and then transmit it to the server for persistence. One specific issue that I encountered was when a user input text containing an STX character (0x2) ...

Limiting the data obtained from the API to extract only the desired values

Using an API, I am retrieving customer information and displaying it in the console. The code snippet used for this operation is: if (this.readyState === 4) { console.log('Body:', this.responseText); } }; This returns a JSON object with v ...

Laravel 5.0 facing issues with AJAX requests

For my Laravel 5.0 project, I am utilizing Google API's for Google Oauth login. After successfully retrieving the email and id_token of the currently logged-in user, I aim to send this data to the SigninController to access our own API. The goal is to ...