AngularJS Error: ng:areq - Invalid argument detected within the controller usage

I've recently started learning AngularJs and I'm facing an issue while using controllers to create a basic application. Unfortunately, I keep encountering an Error that I can't seem to resolve.

Error: ng:areq Bad Argument. Argument 'languages' is not a function, got undefined

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>Angular JS | Controllers</title>
    <script type="text/javascript" src="../resources/js/angular.min.js"></script>

    <script>
        (function(angular){
            var myApp = angular.module('myApp', []);
            myApp.controller = ('languages', function($scope){
                $scope.myFavLanguage = 'None';
            });
        })(window.angular);


    </script>
</head>
<body >

    <div ng-controller="languages">
        Select your favourite langauge:
        <button>ReactJS</button>
        <button>PHP</button>
        <button>JavaScript</button>
        <button>C++</button>

        <p>Your favourite language is {{myFavLanguage}}</p>
    </div>


</body>
</html>

I have extensively researched online and checked various discussions on stackoverflow in an attempt to fix the issue, but none of them provided a solution. Here are some threads that I looked at along with others. Please review them before assuming it's a duplicate problem:

Angularjs bad argument ng:areq error

Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

Argument ... is not a function, got undefined

Thanks for any assistance

Answer №1

When defining a controller in AngularJS, make sure to utilize the controller() method.

myApp.controller = ('languages', function($scope){
                 ^

To correct an error, remove the unnecessary =.

myApp.controller('languages', function($scope) {

For more details and guidance, refer to the official documentation.

I recommend adopting the min-safe syntax for better code structure.

myApp.controller('languages', [$scope, function ('$scope') {

}]);

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

The value of input text in AngularJS forms is consistently evaluated as undefined

Here's my form: <form> <input class="text_box1" type="text" name="email" ng-model="forget.email" > <button style="width:auto" class="sign_up" ng-click="doForget(forget)">Get a Password</button> </form> In my app.js, I h ...

What could be the reason behind my canvas line appearing diminutive and haphazard?

My code snippet below is supposed to draw a box with a margin of 10 pixels around the canvas. However, the outcome is not as expected - instead of a complete box, I'm getting an L-shaped line. This is quite puzzling since the logic in my code seems so ...

Generate responsive elements using Bootstrap dynamically

I'm having success dynamically generating bootstrap elements in my project, except for creating a drop-down menu. ColdFusion is the language I am using to implement these div elements: <div class="panel panel-primary"><div class="panel-head ...

jQuery form validation with delay in error prompts

I am experiencing a strange issue with my HTML form validation function. It seems to be showing the alert div twice, and I can't figure out why this is happening. Adjusting the delay time seems to affect which field triggers the problem. Can anyone sp ...

Redux persist isn't functioning properly as the rehydration process only happens one time

I am currently working with React version 15.4.2 and Redux, trying to persist my React/Redux state when the browser refreshes. Despite suggestions of using redux-persist, I encountered issues when following the basic instructions as the state resets to emp ...

Exploring Angular 2: Unveiling the secrets of lifecycle hooks in lazy loaded

Currently, I'm working on an application that involves lazy loaded Angular modules. I have a straightforward inquiry: Is there a way to detect an event once a module is loaded? For instance, similar to the OnInit lifecycle hook for components. I fo ...

What is the best way to add custom meta tags in html-webpack-plugin?

When using Webpack in conjunction with the html-webpack-plugin, I have a requirement to conditionally inject a <meta></meta> tag into the generated index.html file based on an environment variable. How can this be achieved? ...

Having issues showcasing the array of objects stored in $scope in AngularJs

I'm encountering an issue where I can't seem to display the values of my scope variables. Even though I'm new to Angular, I've successfully done this many times before. Here are the key parts of my index.html file. The div-ui element is ...

Creating a div overlay triggered by the addition of a child tag

Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...

Increased impact of dynamically added elements following page transition

After implementing dynamic functionality from jQuery in my code, I encountered an issue where if I navigate back one page and then return to the original page containing the added elements, they seem to trigger twice upon clicking. To troubleshoot, I incl ...

oidc-client-js failing to display all profile claims that are supported by oidc-client-js

When setting up UserManager on the oidc-client-ts TypeScript module using the config object below: var config = { authority: "https://localhost:3000", client_id: "js", redirect_uri: "https://localhost:3001/callback.ht ...

The controller element in AngularJS becomes undefined when invoked within a directive

Presented below is a snippet of my controller: myApp.controller('WizardController', function ($scope, $http) { $scope.user = { addressline1: null, cobuyer: null, validate: null, cobuyerfirstname: null, cobuyerlastname: null, ...

Application with menu design, similar to the layout of google.com on mobile devices

Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...

Using Vue: What is the best way to invoke a different method within a callback function?

After the save_key() function is executed, I need to invoke the get_data() function. However, I keep encountering a Cannot read property 'get_data' of undefined error. My assumption is that this error occurs because the function is called from a ...

What is the process for obtaining the sheetId using Google Sheets API with Javascript?

Hey there, if you need to use sortRange in the Google Sheets API, remember that sheetId should be an integer and not a string. How can I retrieve it starting with the sheet's name as a string? This method works perfectly for sorting my sheet. However ...

"Clicking on AppBar MenuItem functions properly on desktop, but it does not work on mobile devices in Material UI using

Within my reactjs application that employs Material UI, I have a Appbar containing a dropdown menu positioned in the top right corner. On desktop, the onClick function for each MenuItem works as expected. However, on mobile devices, the function does not t ...

Securely Connecting to an MQTT Broker with a JavaScript Client (React) while Safeguarding Credentials

Looking to securely connect my React application to a Mosquitto MQTT broker without exposing sensitive credentials to users who can access the JavaScript code. Considering options for authentication, such as using an API with JWT authentication to retriev ...

When tab switching occurs, the alert box fails to be processed by the browser

When using the alert(message) function, it will display an alert box with a message and an OK button. It will also pause the execution of any code that follows until the OK button is clicked. However, I have noticed a peculiar situation where switching tab ...

What is the correct way to chain promises within Promise.all?

Essentially, I retrieve all the rows from a schedule table and then process each individual row. If the row is already in the command table, I skip it. Otherwise, I insert it. Within Promise.all(rows.map(function(row){ I have 2 chained promises: return ...

What is the best way to deploy a user interface update to a JavaScript frontend?

I am in the process of creating a basic react application that fetches multiple images and presents them as cards. The goal is to have an informational message displayed while the images are being loaded, and then remove the message once all the images ha ...