Error: error:areq Bad Argument while defining a controller

Question

This is my first attempt with Angular. I am trying to run existing code from Internet and it gives error:

Error: error:areq Bad Argument
Argument 'ngAddressListController' is not a function, got undefined

This code works well with AngularJS < 1.3 but it's giving problem in 1.3+

Code is given below:

HTML

<!doctype html>
<html ng-app="">
<head>
    <title>Ng Addressbook</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
    <script src="main.js"> </script>
</head>
<body>
<div ng-controller="ngAddressListController">
    <h3>Ng Address Book</h3>
    <div id="container">
        <h3>There are 4{{contacts}} Contacts So far</h3>
        <ul>
            <li>
                <span>First Name</span>
                <span>Last Name</span>
            </li>
        </ul>
    </div>

</div>
</body>
</html>

main.js

function ngAddressListController($scope)
{
    $scope.contacts = [
        {first_name:'Jane', last_name:'Doe'},
        {first_name:'Jhon', last_name:'Doe'}
    ];
}

Seems Angular < 1.3 was and I should stick with that?

Where is the js for the controller that calls this function? i.e. `app.controller('MyCtrl', ngAddressListController);` — haxtbh, Feb 07 '15 at 17:29
See https://docs.angularjs.org/api/ng/directive/ngController - In the example app.js it sets up the controller then the function is defined below it. Have you got something like this? — haxtbh, Feb 07 '15 at 17:33

JLRishe · Accepted Answer · 2015-02-07T17:39:53.833

1

I don't know definitively, but given that the approach you're using for defining a controller there (with a bare global function) was in the AngularJS documentation right up until 1.2.19 and then vanished in 1.2.20, I would presume that that approach is deprecated.

The conventional way to define a controller is as follows:

// define an app module
angular.module('myApp', [])
// add a controller to it
.controller('ngAddressListController', ['$scope', function ($scope) {
    $scope.contacts = [
        {first_name:'Jane', last_name:'Doe'},
        {first_name:'Jhon', last_name:'Doe'}
    ];
}]);

Then in your HTML, you would use the name of your app:

<html ng-app="myApp">

This style is used right at the top of the ngController documentation from version 1.2.20 onward.

https://docs.angularjs.org/guide/controller

Also see this note in the 1.2.19 docs:

NOTE: Although Angular allows you to create Controller functions in the global scope, this is not recommended. In a real application you should use the .controller method of your Angular Module for your application as follows

edited Feb 07 '15 at 17:39

answered Feb 07 '15 at 17:33

JLRishe

99,490
19
131
169

`Error: error:modulerr Module Error Failed to instantiate module myApp due to: Error: [$injector:nomod] http://errors.angularjs.org/1.3.1/$injector/nomod?p0=myApp at Error (native)` – Volatil3 Feb 07 '15 at 17:38
@Volatil3 Sorry, that should have been `angular.module`, not `angular.app`. – JLRishe Feb 07 '15 at 17:40
it worked. Thanks. But, I am kind of suspicious that whether I should use 1.3.x or stick with 1.2.x since I am using it very first time? – Volatil3 Feb 07 '15 at 17:42
@Volatil3 I don't think there's any value in learning to use a framework with an outdated version. I suggest you get the latest (1.4.x) and work with that. – JLRishe Feb 07 '15 at 17:44

Error: error:areq Bad Argument while defining a controller

1 Answers1