CODEWITHSUNDEEP
javascriptangularjs
Javier Núñez
Javier Núñez

Reputation: 622

AngularJS error loading Controller

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.

Upvotes: 1

Views: 475

Answers (4)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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>

Upvotes: 4

Alexander Elgin
Alexander Elgin

Reputation: 6956

There were several errors

  1. ng-app was not set
  2. angular module was not defined
  3. 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>

Upvotes: 1

Gopikrishnan
Gopikrishnan

Reputation: 194

In HTML, add

<html ng-app="myapp">

and the script is 

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

Upvotes: 3

ndequeker
ndequeker

Reputation: 7990

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

Upvotes: 3

Related Questions