CODEWITHSUNDEEP
javascriptangularjs
Aissa El Ouafi
Aissa El Ouafi

Reputation: 157

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

Upvotes: 0

Views: 1331

Answers (2)

Kalu Singh Rao
Kalu Singh Rao

Reputation: 1697

<!DOCTYPE html>
<html ng-app="logAnalysisApp">

<head lang="en">
  <meta charset="UTF-8">
  <title>Log Analysis : User feedback</title>
  <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>

  <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-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.message">
          <td>{{ log }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>


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

  });
</script>

</html>

Upvotes: 0

xkeshav
xkeshav

Reputation: 54022

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

Upvotes: 1

Related Questions