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

What is the best way to access the inputName element using the ng-messages directive?

Is there a way to trigger error messages without knowing the input name? Take a look at the code snippet below: <input class="form-control" id="{{field.field_id}}" set-name="{{field.field_id}}" type="text" ...

Encountering difficulties in resolving the HTML view with Spring Boot

After creating a Spring Starter Project in Eclipse, I only selected the Web dependencies checkbox. Despite writing a simple html file and controller, I keep encountering the Whitelabel Error Page. I have made the decision not to use any template engines ri ...

Is it possible to include a base url for imports in React JS?

Conventional method for adding imports: import Sample from ‘../../../components/signup’ I want to simplify imports by removing the front dots and slashes: import Component from ‘components/signup’ Is there a way to set a base URL for imports to ...

Ensure that you accurately maintain object ids following the creation of elements using ng-repeat

I have a set of items listed with unique objects within my controller $scope.itemsList = [ {"id": 0, "item": "sw", "category": 'A' }, {"id": 1, "item": "mlr", "category": 'B'}, {"id": 2, "item": "lvm", "category": 'C&a ...

Transferring data to modal scope using angular ui-bootstrap

I am currently working on an Angular form that utilizes a ui-bootstrap modal dialog in my Sharepoint site. The site has different language versions, English and Spanish, and I need to display the appropriate content based on the context. My challenge is ...

What is the best method for utilizing a single L.Shapefile/zip file Object and modifying the onEachFeature function for each layer?

I am currently facing an issue where I have multiple tileLayers each containing a shape file. These tile layers represent different datasets based on variables and adjust colors accordingly. I have been able to achieve this by creating three separate Obje ...

Tabulate the number of items in an array based on the month and

I have received JSON data with dates indicating the creation time of multiple parcels. I want to analyze this data and calculate the total number of parcels created in each month. I am new to this process and unsure about which thread on Stack Overflow can ...

Include a <script> tag within the HTML code in AngularJS

Is there a way to insert a script tag into paysucc.html when the response.statusText equals "OK"? The script: <script src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}"></script> Substitute checkoutId with response.dat ...

Identify any fresh elements incorporated into the DOM following an AJAX call

I'm attempting to showcase a newly added div element within the DOM using AJAX. Through AJAX/PHP, I dynamically inserted some new buttons: <button type="button" id="viewPP_'.$index.'" onclick="viewPP('.index ...

Encountering Problem with Jmeter Script Playback - Kindly Activate JavaScript to Access Page Information

I'm currently experiencing a challenge when trying to simulate the following scenario in my JMeter script. I would truly appreciate any assistance or solutions you can offer. My goal is to create a JMeter script for a form submission process within a ...

Using jQuery and AJAX to dynamically add data to POST parameters

Hello, I have a question that may sound like one from a newbie. I am trying to figure out how to insert a variable into a parameter for a POST request instead of simply writing the number in directly: var x = 3; id=(the var x needs to be here)&appid=4 ...

The process of encoding Point of Sale (POS) data as application/x-www-form-urlencoded

Can anyone provide guidance on how to correctly POST a URL encoded as application/x-www-form-urlencoded? I have all the necessary variables for the API suggestion below, but I'm struggling with posting it correctly. Thank you in advance for your help ...

When a user inputs in the field, it automatically loses focus

An error is encountered in two scenarios: When the input includes an onChange event handler When the input is located within a component that is called on another page For instance: In Page1.js, we have: return <div> <Page2 /> </div ...

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

Is there a method to create a typecheck for hasOwnProperty?

Given a certain interface interface Bar { bar?: string } Is there a way to make the hasOwnProperty method check the property against the defined interface? const b: Bar = { bar: 'b' } b.hasOwnProperty('bar') // works as expected b. ...

The process for changing the textContent to X when an image is clicked

How can I create a function that changes the text content to 'X' when an image is clicked? I already have a function that updates the title based on the image dataset, but combining the two functions has been unsuccessful. Can someone help me con ...

What is the proper way to generate an iframe with a width set to "100%" or left empty, rather than width = "100"?

I am currently utilizing vimeowrap to iterate through a playlist of videos. I would like the iframe that is generated by vimeowrap to have either a width and height set to "100%" or nothing at all. For more information on Vimeo Wrap, visit: To see my tes ...

Display additional inputs using the PHP Foreach Loop depending on the selection made

I have a PHP Foreach loop that includes a "Quantity" input field. When users select a quantity, the corresponding number of new inputs should be displayed. For example, if the user chooses a quantity of "3", then 3 new inputs should appear for that item. K ...

Refreshing the Date Display with AJAX Response

Within a view, there is a DisplayFor connected to a DateTime field in the Model. After an AJAX call returns a Date to update the field, I am able to convert the AJAX date into a MM/DD/YYYY format. However, using .val to set the DisplayFor does not reflect ...

Enhancing time slot height on Fullcalendar V5: A step-by-step guide

Curious about adjusting the height of time slots in Fullcalendar V5 - any tips? ...