Aissa El Ouafi Aissa El Ouafi - 5 months ago 25
AngularJS Question

Angular JS error : "angular.js:13708 Error: [ng:areq] "

I want to create a single page called

feedback.html
that contains a table using Angular JS. I want to get data from a controller defined at
controller.js


feedback.html

<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>Log Analysis : User feedback</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body ng-app="logAnalysisApp" ng-controller="logFeedbackController">
<div class="col-md-12">
<table class="display table">
<thead>
<tr><th> Log List </th></tr>
</thead>
<tbody>
<tr ng-repeat="log in logList">
<td>{{ log.message }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script type="text/javascript" src="../../js/service/services.js"></script>
<script type="text/javascript" src="../../js/controller/controller.js"></script>
</html>


controller.js

var app = angular.module('logAnalysisApp', []);
app.controller('logFeedbackController',function($scope) {
$scope.logList = [
{
message : 'log number one for the test',
server : 'testserver',
environment : 'dev'
},
{
message : 'log number two for the test',
server : 'prdserver',
environment : 'prd'
}];
});


app.js

angular.module('logAnalysisApp',[
'logFeedbackController'
])


My project has the following structure :

enter image description here

I get the following error message :

angular.js:13708 Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?p0=logFeedbackController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412
at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:22:508)
at Qa (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:23:78)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:89:273
at ag (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:72:353)
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:64:218)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:58:481)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:58:498)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:58:119

Answer

make below changes

  1. replace ng-app from <html> with ng-app="logAnalysisApp" and remove it from <body>

  2. change in controller.js ;

    remove [] << it will declare a new module instead extending the defined module in app.js

    var app = angular.module('logAnalysisApp');

  3. change in app.js

remove controller dependency

angular.module('logAnalysisApp',[])

working plunker

Comments