Angular controller error: 'Controller is not a function, got undefined'

Question

I am getting the following error in my angular application: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined. My JS and HTML are below. This is actually a part of an ionic/cordova project, but here is a simplified jsfiddle in which I encounter the same problem.

My JS:

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

app.controller = ('HomeController', function($scope) {
     $scope.players = "testing";
});

And here is my HTML:

<html ng-app="TourneyTime">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World!</title>

    <link href="bower_components/ionic/lib/css/ionic.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
    <script src="bower_components/ionic/lib/js/ionic.bundle.js"></script>
    <script src="js/app.js"></script>

</head>
<body ng-controller="HomeController">
    <div class="app">
        <h1>Apache Cordova</h1>
        <h1>{{players}}</h1>

    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script src="bower_components/jquery/dist/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

What is causing this error? I was planning on using $stateProvider and $urlRouterProvider but tried this simple example with an in-line ng-controller attribute first and encountered this error. I think I'm using the correct syntax but please correct me if I am wrong.

Thank you very much for your time. Let me know if you need any additional information or if I am being unclear.

Aaron Cicali · Accepted Answer · 2015-06-22 18:41:05Z

3

controller() is itself a function to be called, not a property to be assigned as you're doing.

Try this instead:

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

app.controller('HomeController', function($scope) {
    $scope.players = "testing";
});

answered Jun 22, 2015 at 18:41

Aaron Cicali

1,55615 silver badges30 bronze badges

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

Comments

Nikhil Aggarwal · Accepted Answer · 2015-06-22 18:39:35Z

1

Update your code to

app.controller('HomeController', function($scope) {
     $scope.players = "testing";
});

answered Jun 22, 2015 at 18:39

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Manwal · Accepted Answer · 2015-06-22 18:46:32Z

1

Correct code should be:

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

app.controller('HomeController', function($scope){
  //code
});

Working Fiddle

edited Jun 22, 2015 at 18:46

answered Jun 22, 2015 at 18:41

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

1 Comment

Pankaj Parkar Over a year ago

why you removed ionic module?

Collectives™ on Stack Overflow

Angular controller error: 'Controller is not a function, got undefined'

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related