Question

我想创建一个名为feedback.html的单页，其中包含使用Angular JS的表。我想从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'
])

我的项目具有以下结构：

我收到以下错误消息：

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 1

进行以下更改

将ng-app中的<html>替换为ng-app="logAnalysisApp"，并将其从<body>
更改 controller.js ;

删除[] ＆lt;＆lt; 它将声明一个新模块，而不是扩展app.js中定义的模块

var app = angular.module（＆＃39; logAnalysisApp＆＃39;）;
更改 app.js

删除控制器依赖

angular.module('logAnalysisApp',[])

working plunker

Answer 2

＆＃13;

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

＆＃13;

Angular JS错误：“angular.js：13708错误：[ng：areq]”

2 个答案: