Why is my Angular controller undefined?

4
votes

I've been following a tutorial, the textbook assures me that this works, but it's bombing with

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

Why? I have linted it, been up and down it and I cannot see a problem. Why is SimpleController coming up undefined?

<html ng-app>
<head>
    <title>
    </title>
</head>
<body>
    <input type="text" ng-model="blah" />

    <div ng-controller="SimpleController">
        <h3>looping a data set</h3>
        <ul>
            <li ng-repeat="cust in customers | filter:blah | orderBy:'city'">
                {{cust.name | uppercase}} - {{cust.city | lowercase}}
            </li>
        </ul>
    </div>

    <script src="angular.js"></script>
    <script>
        function SimpleController($scope)
        {
            $scope.customers = [
                {name: 'John Smith', city: 'Phoenix'},
                {name: 'Jane Smith', city: 'Pittsburgh'},
                {name: 'John Doe', city: 'New York'},
                {name: 'Jane Doe', city: 'Los Angeles'}
            ];
        }
    </script>
</body>
</html>
3
javascriptangularjs

3 Answers

13
votes

My guess is that the angular.js version you are using is 1.3.0-beta.15 or newer.

There is a breaking change in 1.3.0-beta.15 so that: angular will no longer look for controllers on window by default. See 3f2232b5 fore more detail:

With the exception of simple demos, it is not helpful to use globals
for controller constructors. This adds a new method to `$controllerProvider`
to re-enable the old behavior, but disables this feature by default.

BREAKING CHANGE:
`$controller` will no longer look for controllers on `window`.
The old behavior of looking on `window` for controllers was originally intended
for use in examples, demos, and toy apps. We found that allowing global controller
functions encouraged poor practices, so we resolved to disable this behavior by
default.

To migrate, register your controllers with modules rather than exposing them
as globals:

Therefore, your code should be working fine like the textbook assures for angular.js version older than 1.3.0-beta.15.

6
votes

You need to create an app and register it to that app like so:

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

myApp.controller('SimpleController', ['$scope', function($scope) {
  $scope.customers = [
            {name: 'John Smith', city: 'Phoenix'},
            {name: 'Jane Smith', city: 'Pittsburgh'},
            {name: 'John Doe', city: 'New York'},
            {name: 'Jane Doe', city: 'Los Angeles'}
        ];
}]);

and in your html:

<html ng-app="myApp">

Full example in a plunker: http://plnkr.co/edit/tBwjJU3tc6tVc599RVFR?p=preview

1
votes
<html ng-app="app">
<head>
    <title>
    </title>
</head>
<body>
    <input type="text" ng-model="blah" />

    <div ng-controller="SimpleController">
        <h3>looping a data set</h3>
        <ul>
            <li ng-repeat="cust in customers | filter:blah | orderBy:'city'">
                {{cust.name | uppercase}} - {{cust.city | lowercase}}
            </li>
        </ul>
    </div>

    <script src="angular.js"></script>
  <script>
var app = angular.module('app',[]);
app.controller('SimpleController', function($scope)
        {
            $scope.customers = [
                {name: 'John Smith', city: 'Phoenix'},
                {name: 'Jane Smith', city: 'Pittsburgh'},
                {name: 'John Doe', city: 'New York'},
                {name: 'Jane Doe', city: 'Los Angeles'}
            ];
        } )
    </script>
</body>
</html>