AngularJS Rest服务 - 不在表中显示Json数据

时间:2015-12-03 18:11:45

标签: angularjs json rest

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'})
}]);

my controllers.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, “版本”:0.0, “JOBNAME”: “XXXX.job”, “jobKey”: “77b72e46b880e4aeb4fd689c835b282d”}, { “jobInstanceId”:20, “版本”:0.0, “JOBNAME”: “FFFFF.job”, “jobKey”: “f5913a0693c08e24b7fc88a9559ed2bb”}]

但是当我使用Spring启动运行应用程序时 - 它不显示值,但只显示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();
 } } 

2 个答案:

答案 0 :(得分:0)

所以有一堆东西是错的。 要开始$ 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)将ngRoute模块添加为app.js中的依赖项 b)使用ng-controller将div移动到模板目录中的home.html c)添加ng-view代替ng-controller div

d)检查js控制台是否有错误,然后检查网络选项卡,检查所有内容是否符合预期。

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

希望它有所帮助。

答案 1 :(得分:0)

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

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

由:

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

并检查js控制台是否有效......