Angular controller function not running, Error: [ng:areq]

Question

I have created basic example without external script file but while I am creating demo, I am using controller in script.js file, it is not working.

Html Code :

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app>
  <div ng-controller="simpleController">
    <strong>First name:</strong> {{firstName}}<br />
    <strong>Last name:</strong> <span ng-bind="lastName"></span><br />
    <strong>Full name:</strong> {{getFullName()}}<br />       
  </div>
</body>
</html>

script.js

var simpleController = function ($scope)
{
  // Initialize the model variables
  $scope.firstName = "John";
  $scope.lastName = "Doe";

  // Define utility functions
  $scope.getFullName = function ()
  {
    return $scope.firstName + " " + $scope.lastName;
  };
};

Error in console :

Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?p0=simpleController&p1=not%20a%20function%2C%20got%20undefined
O/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412
sb@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:22:508
Qa@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:23:78
gf/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:89:273


https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
Line 117

if my snippet is working fine, please mark it as "answered". — Bowen Li
– Bowen Li, Commented Jul 14, 2016 at 0:33

Bowen Li · Accepted Answer · 2016-07-13 13:17:03Z

2

run the following snippet:

var app = angular.module("app",[]);
app.controller("simpleController",simpleController);


simpleController.$inject = ["$scope"];
function simpleController ($scope)
{
  // Initialize the model variables
  $scope.firstName = "John";
  $scope.lastName = "Doe";

  // Define utility functions
  $scope.getFullName = function ()
  {
    return $scope.firstName + " " + $scope.lastName;
  };
};

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="simpleController">
    <strong>First name:</strong> {{firstName}}<br />
    <strong>Last name:</strong> <span ng-bind="lastName"></span><br />
    <strong>Full name:</strong> {{getFullName()}}<br />       
  </div>
</body>
</html>

edited Jul 13, 2016 at 13:17

answered Jul 13, 2016 at 13:10

Bowen Li

3971 silver badge8 bronze badges

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

Comments

Srijith · Accepted Answer · 2016-07-13 13:08:11Z

0

You should define an app like below

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

var simpleController = function ($scope)
 {
   // Initialize the model variables
   $scope.firstName = "John";
   $scope.lastName = "Doe";

   // Define utility functions
   $scope.getFullName = function ()
   {
     return $scope.firstName + " " + $scope.lastName;
   };
 };

And use the app in your index.html like this

<body ng-app="app">

answered Jul 13, 2016 at 13:08

Srijith

1,4449 silver badges14 bronze badges

1 Comment

Srijith Over a year ago

Can you post a plunker or a snippet?

Durgpal Singh · Accepted Answer · 2016-07-14 04:42:01Z

0

add this to your code

var app = angular.module('app', []);
app.controller('simpleController', ['$scope', function($scope){
     $scope.firstName = "John";
     $scope.lastName = "Doe";

     // Define utility functions
     $scope.getFullName = function (){
         return $scope.firstName + " " + $scope.lastName;
     };
}]);

for more information read dependecy Injection

edited Jul 14, 2016 at 4:42

answered Jul 13, 2016 at 13:08

Durgpal Singh

12k4 gold badges40 silver badges51 bronze badges

1 Comment

Durgpal Singh Over a year ago

use this way to declare to controller

Collectives™ on Stack Overflow

Angular controller function not running, Error: [ng:areq]

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related