Argument 'CustomersController' is not a function, got undefined

Question

i'm new to angular js and i'm following a tutorial and i'm getting this error Argument 'CustomersController' is not a function, got undefined my code looks like this

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Filters</title>
    <style type="text/css">
    </style>
</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="sdoSort('city')">City</th>
            <th ng-click="doSort('total')">Order Total</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.total | currency:'INR ' }}</td>
            <td>{{ cust.joined | date }}</td>
        </tr>
        <span>Total customers : {{ customers.length }}</span>
    </table>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="app/controller/customerController.js"></script>
</body>
</html>

now this is my CustomerController.js file

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

$scope.customers = [{joined:'2000-12-02',name:'John',city:'Chandler',total:'9.9959'},{joined:'1965-12-02',name:'Jon',city:'Chand',total:'9.959'},{joined:'1962-12-02',name:'On',city:'Chand',total:'9.9'},{joined:'1925-12-02',name:'Ron',city:'Chand',total:'10.23'}];
$scope.doSort = function(propName){
    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
};

}

i use google chrome's console so saw this error, i'm unable to find out what is wrong with my code as i'm following the instructor very well, i'm using angular js 1.3.11 version

score 1 · Answer 1 · answered Feb 02 '15 at 19:50

From Angular 1.3 onwards you could not use global functions. You should always create a module and then inject/create whatever component you wants inside that like controller, directive, etc.

CODE

angular.module('app',[])
.controller('CustomersController',function ($scope){
$scope.sortBy = 'name';
$scope.reverse = false;

$scope.customers = [{joined:'2000-12-02',name:'John',city:'Chandler',total:'9.9959'},{joined:'1965-12-02',name:'Jon',city:'Chand',total:'9.959'},{joined:'1962-12-02',name:'On',city:'Chand',total:'9.9'},{joined:'1925-12-02',name:'Ron',city:'Chand',total:'10.23'}];
$scope.doSort = function(propName){
    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
};
});

HTML

<html ng-app="app">

Thanks.

@runningmark you have couple of answers to mark..do correct one of it.. — Pankaj Parkar, Jun 26 '15 at 17:33

score 1 · Answer 2 · answered Feb 02 '15 at 19:50

It looks like you are overlooking a few of the basics for app setup. I'd suggest Follow this pattern demo'd here and I think you'll be up and running. Create an app.js file to keep things clean and bring it in like your customerController.js file

<html ng-app="app">

app.js

var app = angular.module('app',
    [
    ]);

app.controller('CustomersController', ['$scope', function($scope) {
    $scope.sortBy = 'name';
    $scope.reverse = false;
    $scope.customers = [{joined:'2000-12-02',name:'John',city:'Chandler',total:'9.9959'},{joined:'1965-12-02',name:'Jon',city:'Chand',total:'9.959'},{joined:'1962-12-02',name:'On',city:'Chand',total:'9.9'},{joined:'1925-12-02',name:'Ron',city:'Chand',total:'10.23'}];
    $scope.doSort = function(propName) {
        $scope.sortBy = propName;
        $scope.reverse = !$scope.reverse; 
    }
}]);

Argument 'CustomersController' is not a function, got undefined

2 Answers2