AngularJS : Problem while using ng-controller

Question

Problem with ng-controller : Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl

I'm beginner in AngularJS, i'm facing a problem while using ng-controller : this is my code :

<html>
<head>
    <title></title>
</head>
<body ng-app>

<div ng-controller="ListDataCtrl">
<div ng-repeat="item in listData">
        <p><strong>{{item.name  | uppercase}}</strong></p>
        <p>{{item.country}}</p>
        <p>*********************</p>
    </div>  
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

<script>
    function ListDataCtrl($scope){

        $scope.listData =[
        {"name":"Achraf", "country":"Tunisia"},
        {"name":"Maher", "country":"UAE"},
        {"name":"Ahmed", "country":"USA"},
        {"name":"Issam", "country":"France"}
        ];
    }
</script>


</body>
</html>

the error message is : angular.js:15567 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl

Bill P · Accepted Answer · 2019-06-03 15:10:54Z

2

The error indicated that controller is not registered:

The controller with the name 'ListDataCtrl' is not registered.

From AngularJS version 1.3 you have to register your controllers with modules rather than exposing them as globals: documentation

First of all you need to declare an angularJS module for the app , and then register the controller to that module as below:

<body ng-app="myApp">

In script, app declaration:

var myApp = angular.module('myApp', []);

controller setup:

myApp.controller('ListDataCtrl', ['$scope', function($scope) {
...
}

edited Jun 3, 2019 at 15:10

answered Jun 3, 2019 at 14:36

Bill P

3,61610 gold badges24 silver badges34 bronze badges

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

4 Comments

Achrez Over a year ago

Ok, but i'm watching this tutorial youtube.com/… and it is not mentioned to add a module !?

Bill P Over a year ago

Check here, it has to do with the version you are using. After 1.3 you have to use a module : stackoverflow.com/questions/30622133/…

Achrez Over a year ago

Thank you it is clear, because i'm also working with Angular 5, ng version shows that my angular version is 7.3

Bill P Over a year ago

Don't confuse AngularJS with Angular (2+). It is completely different. Your example uses AngularJS 1.7.8.

Collectives™ on Stack Overflow

AngularJS : Problem while using ng-controller

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related