Angular js- Error: ng:areq Bad Argument-

Question

I saw the there are several question regarding this error, but I didn't find the answer for my case.

I am new to angular and started to build small app.

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="UTF-8">
  <title>Angular Demo</title>
  <script src="lib/angular/angular.min.js"></script>


</head>
<body>
<div ng-controller =" MyController">
  <h1>{{player.name}}</h1>
</div>
<script>
  function MyController($scope) {
    $scope.player = {
      'name': 'Eran Zahavi',
      'number': '7',
      'position': 'link'
    }
  }
</script>
</body>
</html>

When I tried to run it I got the error above--> Error: [ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=MyController&p1=not%20a%20function%2C%20got%20undefined

Sajeetharan · Accepted Answer · 2015-11-30 10:13:23Z

2

If you are refering to angular above 1.3 version, you should declare controller different way,

var newApp = angular.module('newApp', []);
newApp.controller('MyController', function($scope){

   $scope.player = {
      'name': 'Eran Zahavi',
      'number': '7',
      'position': 'link'
   }
});

Here is the Plunker

answered Nov 30, 2015 at 10:13

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

Anik Islam Abhi · Accepted Answer · 2015-11-30 10:18:40Z

1

From angular 1.4.x you can't define controller globally.

You have to declare controller inside module.

Like this

<!doctype html>
<html lang="en" ng-app="app">

    <head>
        <meta charset="UTF-8">
        <title>Angular Demo</title>
        <script src="lib/angular/angular.min.js"></script>
    </head>

    <body>
        <div ng-controller=" MyController">
             <h1>{{player.name}}</h1>

        </div>
        <script>
            var app = angular.module("app", []);
            app.controller("MyController", function($scope) {
                $scope.player = {
                    'name': 'Eran Zahavi',
                        'number': '7',
                        'position': 'link'
                }
            });
        </script>
    </body>

</html>

JSFIDDLE

edited Nov 30, 2015 at 10:18

answered Nov 30, 2015 at 10:11

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Comments

Deepak Kushvah · Accepted Answer · 2015-11-30 10:21:08Z

0

Can you please try this.

<body ng-app="">
<div ng-controller ="MyController">
  <h1>{{player.name}}</h1>
</div>
<script>
  function MyController($scope) {
    $scope.player = {
      'name': 'Eran Zahavi',
      'number': '7',
      'position': 'link'
    }
  }
</script>
</body>

answered Nov 30, 2015 at 10:21

Deepak Kushvah

2782 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular js- Error: ng:areq Bad Argument-

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related