Error: [ng:areq] customerController not a function got undefined

Question

I am beginner to angularjs and I am writing a simple application to get started with it. I keep getting this error Error: [ng:areq] customerController not a function got undefined

I have tried to check whats wrong with my code and everything seems alright (at least for me). Kindly go through the code and help me out

Home.html

<html ng-app="customerApp">
<head>
<title> MyProject</title>
</head>

<body ng-controller="customerController">
<table border="2">
    <thead>
        <th ng-click="doSort('name')">Name</th>
        <th ng-click="doSort('city')">City</th>
    </thead>
    <tr ng-repeat="cust in customers | filter: customerFilter | orderBy:sortBy:reverse">
        <td>{{ cust.name }}</td>
        <td>{{ cust.city }}</td>
    </tr>
</table>
<br \>
<br \>
    Total customers: {{ customers.length }}

<script src="/scripts/angular.min.js"></script>
<script src="/app/app.js"></script>
<script src="/app/controllers/customerController.js"</script>
</body>
</html>

app.js

(function(){
    var app = angular.module('customerApp', []);
})();

customerController.js

(function (){

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

    $scope.customers= [{name:'Sachin',city:'Dharwad'},    {name:'Karan',city:'Hubli'},{name:'Shishir',city:'Mysore'}];
    $scope.doSort= function (propName){

        $scope.sortBy= propName;
        $scope.reverse= !$scope.reverse;
    };
};
    customerController.$inject = ['$scope'];
    angular.module('customerApp').controller('customerController',customerController    );
})();

PS: I have already referred this question

score 2 · Accepted Answer · answered Feb 07 '16 at 14:52

2

You forgot to close the opening part of script tag . It is obvious in syntax highlighter in the question code

Change

<script src="/app/controllers/customerController.js"</script>

To

<script src="/app/controllers/customerController.js"></script>

answered Feb 07 '16 at 14:52

charlietfl

170,828
13
121
150

Larry Lane · Answer 2 · 2016-02-07T15:02:47.957

You can not use global functions as controllers anymore.

JavaScript/Angular(Live Preview http://codepen.io/larryjoelane/pen/ZQqVVY):

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

app.controller("customerController", function($scope) {
  $scope.sortBy = 'name';
  $scope.reverse = false;

  $scope.customers = [{
    name: 'Sachin',
    city: 'Dharwad'
  }, {
    name: 'Karan',
    city: 'Hubli'
  }, {
    name: 'Shishir',
    city: 'Mysore'
  }];
  $scope.doSort = function(propName) {

    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
  };
});

HTML:

    <body ng-app="customerApp" ng-controller="customerController">
  <table border="2">
    <thead>
      <th ng-click="doSort('name')">Name</th>
      <th ng-click="doSort('city')">City</th>
    </thead>
    <tr ng-repeat="cust in customers | filter: customerFilter | orderBy:sortBy:reverse">
      <td>{{ cust.name }}</td>
      <td>{{ cust.city }}</td>
    </tr>
  </table>
  <br \>
  <br \> Total customers: {{ customers.length }}

OP is registering controller properly. You are misinterpreting use of global functions as controllers (deprecated) vs passing function reference to controller declaration which is totally valid — charlietfl, Feb 07 '16 at 14:50
Good catch on the script tag, Strangely enough I tried his code at first and it didn't work. I missed the part where he was declaring his app module. — Larry Lane, Feb 07 '16 at 15:06

Error: [ng:areq] customerController not a function got undefined

2 Answers2