Angular js- Error: ng:areq Bad Argument-

0
votes

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

3
javascriptangularjs

3 Answers

2
votes

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

1
votes

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

0
votes

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>