AngularJS Rest Service - 不在表中显示 Json 数据答案

【问题标题】：AngularJS Rest Service - Not displaying Json data in tableAngularJS Rest Service - 不在表中显示 Json 数据
【发布时间】：2015-12-03 18:11:45
【问题描述】：

index.html 如下

<!doctype html>
<html>
<head>
<title>Batch Job Data</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="BatchJobApp" >

<div class="container">
<div class="left"><h2><i>Angular JS + Rest + batch /i> </h2></div>
<div class="left" ng-controller="BatchJobController">
<h2>Batch Job Data</h2>
<table>
  <tr>
    <th>Job Instance ID</th>
    <th>Version</th>
    <th>Job Name</th>
     <th>Job Key</th>
  </tr>
  <tr ng-repeat="batchjob in batchjobs">
    <td>{{ batchjob.jobInstanceId }}</td>
    <td>{{ batchjob.version }}</td>
    <td>{{ batchjob.jobName }}</td>
    <td>{{ batchjob.jobKey }}</td>
  </tr>
</table>
</div>  
<script src="webjars/jquery/1.11.1/jquery.js"></script>
<script src="webjars/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="webjars/angularjs/1.2.19/angular.js"></script>
<script src="webjars/angularjs/1.2.19/angular-route.js"></script>
<script src="webjars/angularjs/1.2.19/angular-resource.js"></script>

<script src="js/app.js"></script>
<script src="js/services/services.js"></script>
<script src="js/controllers/controllers.js"></script>
</body>
</html>

我的 App.js 如下 -

var app = angular.module('BatchJobApp', ['BatchJobApp.controllers', 'BatchJobApp.services' ]);
'use strict';

app.config(['$routeProvider','$locationProvider',
                  function($routeProvider, $locationProvider) {
                    $routeProvider
                      .when('/batch', {templateUrl: 'templates/home.html', controller: 'BatchJobController'});
                      .otherwise({redirectTo: '/batch'})
}]);

我的控制器.js

'use strict';

angular.module('BatchJobApp.controllers', [])
.controller('BatchJobController', ['$scope', 'BatchJobService', function($scope, BatchJobService) {

$scope.$apply();
  console.log($scope.batchjobs);
alert("************** In controller js");

  BatchJobService.getBatch(function(data) {
    $scope.batchjobs = data;
  console.log('Successful Transaction');
});
console.log('Failed Transaction');

}]);

我的 services.js 是

angular.module('BatchJobApp')
              .service('BatchJobService', function($http, $location) {
this.getBatch = function() { 
    return $http.get('localhost:88/batchjob');
};

});

现在我的休息服务从 MySQL 数据库中获取数据并驻留在同一个项目中，它工作正常我得到了类似运行“localhost:88/batchjob”时的结果 -

[{"jobInstanceId":0,"version":0.0,"jobName":"XXXX.job","jobKey":"77b72e46b880e4aeb4fd689c835b282d"}, {"jobInstanceId":20,"version":0.0,"jobName":"FFFFF.job","jobKey":"f5913a0693c08e24b7fc88a9559ed2bb"}]

但是当我使用 Spring boot 运行应用程序时 - 它不显示值，而是仅将 Text 显示为 {{ batchjob.jobInstanceId }} ，所以没有..

我是否缺少任何 jar 或 Js....任何指针都会有所帮助....

我的 pom.xml 是 -

    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
    </dependency>
<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-batch</artifactId>
    </dependency>

    <dependency>
        <groupId>com.oracle</groupId>
        <artifactId>ojdbc7</artifactId>
        <version>12.1.0.2.0</version>
    </dependency>

      <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.26</version>
    </dependency>

这是我的休息服务控制器类

@RestController
@RequestMapping("/batchjob")
 public class BatchJobController extends BaseRestController {

@Autowired private BatchJobRepository batchJobRepository;

@RequestMapping(value="", method=RequestMethod.GET)
  public List<BatchJob> batchJobData() {
    return  batchJobRepository.findAll();
 } }

【问题讨论】：

当您尝试使用 Spring boot 运行应用程序时出现任何错误？
浏览器的js控制台有错误吗？

标签： angularjs json rest

【解决方案1】：

$http.get() 返回一个 promise，所以尝试替换：

BatchJobService.getBatch(function(data) {
    $scope.batchjobs = data;
}

作者：

BatchJobService.getBatch.success(function(data) {
    $scope.batchjobs = data;
})

如果不起作用，请检查 js 控制台...

【讨论】：

【解决方案2】：

所以有很多东西是错误的。开始 $http 返回的是一个承诺，因此“then”函数不是您的服务的参数：

BatchJobService.getBatch(function(data) {
    $scope.batchjobs = data;
  console.log('Successful Transaction');
});

应该是：

BatchJobService.getBatch().then(function(response){
    $scope.batchjobs = response.data;
    console.log('Successful Transaction json data',data);
});

第二：

您的 app.js 文件引用了模板中的 home.html 文件，您没有为它留下任何空间。为此，如果您选择使用当前未在 app.js 文件中加载的 ngRoute 模块，则必须放置一个 ng-view

我的建议是看一下角度教程来掌握基本概念https://docs.angularjs.org/tutorial。

另一方面，要解决您当前的问题，您应该：

a) 在 app.js 中添加 ngRoute 模块作为依赖项 b) 将带有 ng-controller 的 div 移动到模板目录中的 home.html c) 添加一个 ng-view 来代替 ng-controller div

d) 检查 js 控制台是否有错误，并检查网络选项卡以检查所有内容是否按预期进行。

如果我只是为了测试目的，我会尝试使用 '/' 路由而不是 '/batch' 以便 spring-boot 默认返回 index.html 并且您可以检查控制台和网络选项卡

希望对你有帮助。

【讨论】：

我厌倦了添加它..仍然是相同的结果:(