AngularJS error loading Controller

Question

I have a really dumb problem but I don't know how to fix it. I have this index.html file with AngularJS loaded. I'm using Plunker to test the code:

<!DOCTYPE html>
<html ng-app="">

  <head>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="BodyController">
    <h1>{{ message }}</h1>
  </body>

</html>

And this script.js file with this information:

var BodyController = function($scope) {
  $scope.message = "Hi Angular!"
}

In the inspector it says:

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

The script is loaded. I have defined the controller in the JS file and attach the ng-controller directive, so I don't know where this can fail.

Shashank Agrawal · Accepted Answer · 2016-01-29 08:52:53Z

4

This is very basic of AngularJS.

You first need to create a module:

var fooApp = angular.module("foo", [])

And then, register your controller there:

var BodyController = function($scope) {
  $scope.message = "Hi Angular!"
}
fooApp.controller("BodyController", BodyController);

And, in your HTML tag, change your ng-app like this:

<html ng-app="foo"></html>

edited Jan 29, 2016 at 8:52

answered Jan 29, 2016 at 8:46

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

Comments

ndequeker · Accepted Answer · 2016-01-29 08:46:11Z

3

You need to add the controller to your Angular module.

angular.module('app', [])
.controller('BodyController', function($scope) {
  $scope.message = "Hi Angular!"
})

More info on how to setup a controller https://docs.angularjs.org/guide/controller

answered Jan 29, 2016 at 8:46

ndequeker

8,0187 gold badges64 silver badges94 bronze badges

Comments

Gopikrishnan · Accepted Answer · 2016-01-29 08:49:02Z

3

In HTML, add

<html ng-app="myapp">

and the script is

angular.module('myapp', []).controller('BodyController',BodyController)

answered Jan 29, 2016 at 8:49

Gopikrishnan

1941 silver badge8 bronze badges

Comments

Alexander Elgin · Accepted Answer · 2016-01-29 08:51:21Z

1

There were several errors

ng-app was not set
angular module was not defined
the controller was not defined

angular.module('app', [])
.controller('BodyController', function($scope) {
  $scope.message = "Hi Angular!"
});

<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body ng-controller="BodyController">
    <h1>{{ message }}</h1>
  </body>
</html>

answered Jan 29, 2016 at 8:51

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

Collectives™ on Stack Overflow

AngularJS error loading Controller

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related