Angular JS controller throwing error

Question

I am getting following error while trying to list contents from controller function in angular JS. I am pretty new to Angular JS. I checked one the video tutorial and tried code by my own. I written the same code as it was there in the tutorial but though it is showing this error. Unable to understand what cause this to happen.

Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=simpleController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at file:///F:/Study/angular/angular.min.js:6:417
at Rb (file:///F:/Study/angular/angular.min.js:19:510)
at sb (file:///F:/Study/angular/angular.min.js:20:78)
at $get (file:///F:/Study/angular/angular.min.js:75:396)
at file:///F:/Study/angular/angular.min.js:57:100
at r (file:///F:/Study/angular/angular.min.js:7:408)
at B (file:///F:/Study/angular/angular.min.js:56:471)
at g (file:///F:/Study/angular/angular.min.js:51:335)
at g (file:///F:/Study/angular/angular.min.js:51:352)

My code is as below -

<head>
    <title>Angular ng-controller</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="simpleController">
        <input type="text" data-ng-model='name' />
        <ul>
            <li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        function SimpleController($scope) {
            $scope.customers = [{
                name: 'John Doe',
                city: 'Pheonix'
            }, {
                name: 'John Smith',
                city: 'New York'
            }, {
                name: 'Jane Doe',
                city: 'San Fransisco'
            }];
        }
    </script>
</body>

softvar · Accepted Answer · 2015-05-23 09:23:40Z

1

You must inject your controller into application module.

Give your app a name:

<html ng-app='myApp'>

Inject controller:

var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
    $scope.customers = [
        { name:'John Doe',city : 'Pheonix'},
        { name : 'John Smith',city: 'New York'},
        { name : 'Jane Doe',city : 'San Fransisco'}
    ];
}

edited May 23, 2015 at 9:23

softvar

18.6k13 gold badges58 silver badges77 bronze badges

answered May 23, 2015 at 8:42

freethinker

2,4454 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jad-panda · Accepted Answer · 2015-05-23 08:55:01Z

Controller simpleController should be registered under angular app.

see the working code below.

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

app.controller('simpleController', function($scope) {
  $scope.customers = [{
    name: 'John Doe',
    city: 'Pheonix'
  }, {
    name: 'John Smith',
    city: 'New York'
  }, {
    name: 'Jane Doe',
    city: 'San Fransisco'
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app'>
  <div data-ng-controller="simpleController">
    <input type="text" data-ng-model='name' />
    <ul>
      <li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
    </ul>
  </div>

</div>

Samir Das · Accepted Answer · 2015-05-23 09:01:04Z

0

Your code is absolute correct for the angular version less than 1.3 except the function name spelling. It should be data-ng-controller="SimpleController" while calling as you have declared.

You can try after including following cdn

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js

jsfiddle: http://jsfiddle.net/samirkumardas/3tt3p09h/

edited May 23, 2015 at 9:01

answered May 23, 2015 at 8:54

Samir Das

1,91813 silver badges20 bronze badges

Comments

Parthipan S · Accepted Answer · 2015-05-23 10:58:10Z

You are not defined angular.module in your script.

   <head>
        <title>Angular ng-controller</title>
        <script type="text/javascript" src="angular.min.js"></script>
    </head>

    <body ng-app='filterApp'>
        <div ng-controller="simpleController">
            <input type="text" data-ng-model='name' />
            <ul>
                <li ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
            </ul>
        </div>


         <script type="text/javascript">
         var app = angular.module('filterApp', []);
         app.controller('SimpleController', function($scope) {
                       $scope.customers = [{
                        name: 'John Doe',
                        city: 'Pheonix'
                    }, {
                        name: 'John Smith',
                        city: 'New York'
                    }, {
                        name: 'Jane Doe',
                        city: 'San Fransisco'
                    }];
                }
            </script>
        </body>

Collectives™ on Stack Overflow

Angular JS controller throwing error

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related