AngularJS - Error: [ng:areq] Argument 'CustomersController' is not a function, got undefined

Question

Here is my view index.html:

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Iterating Over Data</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body ng-controller="CustomersController">
    <h2>Customers</h2>
    Filter: <input type="text" ng-model="customerFilter.name">
    <br><br>
    <table>
        <tr>
            <th ng-click="doSort('name')">Name</th>
            <th ng-click="doSort('city')">City</th>
            <th ng-click="doSort('orderTotal')">Order</th>
            <th ng-click="doSort('joined')" >Joined</th>
        </tr>
        <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
            <td>{{ cust.name | uppercase }}</td>
            <td>{{ cust.city | lowercase }}</td>
            <td>{{ cust.orderTotal | currency }}</td>
            <td>{{ cust.joined | date }}</td>
        </tr>
    </table>
    <br>
    <span>Total customers: {{ customers.length }}</span>
    <script src="angular.js"></script>
    <script src"app/controllers/customersController.js"></script>
</body>
</html>

And here is my controller:

function CustomersController($scope) {
  $scope.sortBy = 'name';
  $scope.reverse = false;

  $scope.customers = [{
    joined: '2012-12-02',
    name: 'Dylan',
    city: 'Buffalo',
    orderTotal: 9.521
  }, {
    joined: '1932-12-02',
    name: 'Pete',
    city: 'Detroit',
    orderTotal: 111.521
  }, {
    joined: '1967-11-04',
    name: 'Sampress',
    city: 'Kanas City',
    orderTotal: 92.521
  }];
  $scope.doSort = function(propName) {
    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
  };
}

When I open my index.html file in the browser, I continue to get

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

All of my files are in the right place, I even tried added it as a plain script tag and still am getting the same error, not sure what I'm doing wrong here.

possible duplicate of [Controller not a function, got undefined, while defining controllers globally](http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally) — Phil, Mar 10 '15 at 04:36

Steven Wexler · Accepted Answer · 2015-03-10T05:12:20.500

You are probably either not defining your controller in the global namespace or not defining your controller early enough.

Check to see if you're defining the controller in the global namespace by looking at window.CustomersController. window.CustomersControllershould be your controller function. If you're not defining your controller in the global namespace try adding:

window.CustomersController = CustomersController;

If you're not defining your controller early enough make sure that you're not defining your controller after load events, after DOM ready events, etc. Notice this JS Fiddle only works when "no wrap in - " or "no wrap in - " is selected. It does not work if "onload" or "onDOMready" are selected.

Alternatively, you can name your app:

<html ng-app="foo">
</html>

angular.module("foo", [])
.controller("CustomersController", function CustomersController() {});

score 1 · Answer 2 · answered Mar 10 '15 at 05:04

1

Try this

<html ng-app="App">

Controller

myApp = angular.module('App',[]);
myApp.controller('CustomersController',['$scope',function($scope) {
//Your code here

}]);

answered Mar 10 '15 at 05:04

Alaksandar Jesus Gene

6,523
12
52
83

AngularJS - Error: [ng:areq] Argument 'CustomersController' is not a function, got undefined

2 Answers2