Why does this snippet return "error:areq Bad Argument"?

Question

Could you explain me why the following code return Error: error:areq Bad Argument?

<!DOCTYPE html>
<html ng-app>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script>
    function SimpleController($scope) {
        $scope.users = [
            {name: 'Dave Jones', city: 'Phoenix'},
            {name: 'Jane True', city:'Washington'}
        ];
    }
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="SimpleController">
<ul>
    <li ng-repeat="user in users">{{ user.name }}</li>
</ul>
</body>
</html>

amd · Accepted Answer · 2014-12-02 11:40:23Z

1

In real application you should not define your controller in the global window scope, in the recent version of angular the $controllerProvider doesn't look up by default in the window scope, since it's a bad practice and should be used only for demo purposes.

However you can enable this feature by calling the allowGlobals():

angular.module('myApp').config(['$controllerProvider', function($controllerProvider) {
  // this option might be handy for migrating old apps, but please don't use it
  // in new ones!
  $controllerProvider.allowGlobals();
}]);

the alternative and recommended way is to define it in a module.

The official documentation helps you a lot in this https://docs.angularjs.org/guide/controller

answered Dec 2, 2014 at 11:40

amd

21.7k6 gold badges54 silver badges71 bronze badges

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

1 Comment

simon.denel Over a year ago

Thank you for your answer. It explains very well why at 30:00 in AngularJS Fundamentals In 60-ish Minutes the snippet is not working anymore.

Brant · Accepted Answer · 2014-12-02 11:30:46Z

1

You didn't quite define your controller correctly, try this:

<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script>
    var testApp = angular.module('testApp', []);

    testApp.controller('SimpleCtrl', function ($scope) {
        $scope.users = [
            {name: 'Dave Jones', city: 'Phoenix'},
            {name: 'Jane True', city:'Washington'}
        ];
    })
    </script>
</head>
<body ng-controller="SimpleCtrl">
<ul>
    <li ng-repeat="user in users">{{ user.name }}</li>
</ul>
</body>
</html>

answered Dec 2, 2014 at 11:30

Brant

1,78811 silver badges19 bronze badges

1 Comment

simon.denel Over a year ago

Thank you for your answer. Your code is working well, and uses best practices. But Ahmad's answer explains why my snippet was working with previous versions of AngularJS and is not working anymore.

Collectives™ on Stack Overflow

Why does this snippet return "error:areq Bad Argument"?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related