CODEWITHSUNDEEP
javascriptangularjs
simon.denel
simon.denel

Reputation: 798

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

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

(see live example)

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

Upvotes: 0

Views: 615

Answers (2)

amd
amd

Reputation: 21452

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

Upvotes: 1

Brant
Brant

Reputation: 1788

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>

Upvotes: 1

Related Questions