CODEWITHSUNDEEP
angularjs
dr. strange
dr. strange

Reputation: 665

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

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

Upvotes: 0

Views: 600

Answers (3)

Durgpal Singh
Durgpal Singh

Reputation: 11983

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

Upvotes: 0

Bowen Li
Bowen Li

Reputation: 397

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>

Upvotes: 2

Srijith
Srijith

Reputation: 1444

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">

Upvotes: 0

Related Questions