带有Java后端的angularjs_Java_Javascript_Angularjs

带有Java后端的angularjs

java javascript angularjs

带有Java后端的angularjs,java,javascript,angularjs,Java,Javascript,Angularjs,我试图以json格式从服务器（servlet）获取数据并将其添加到表中。数据成功地从服务器端获取，当我使用console.log（data）时，它会打印数据，但不会将其添加到表中 module.js： var module = angular.module('myApp', []); module.service('ContactService', function($http) { var contacts = [{ }]; this.getContacts = funct

我试图以json格式从服务器（servlet）获取数据并将其添加到表中。数据成功地从服务器端获取，当我使用console.log（data）时，它会打印数据，但不会将其添加到表中

module.js：

var module = angular.module('myApp', []);

module.service('ContactService', function($http) {

    var contacts = [{ }];
    this.getContacts = function($http) {
        var response = $http.get("/PersonalDetail/AngularServlet");
        response.success(function(data, status, header, config) {
            contacts=data;
            console.log("contacts: " + contacts);
            return contacts;
        });
        response.error(function(data, status, header, config) {
            return null
        });
        return contacts;
    }

    this.list = function($http) {
        return  this.getContacts($http);
    }
});

controller.js

module.controller("ContactController", function($scope,$http,ContactService) {
    $scope.contacts=ContactService.list($http);
}

index.html

<html data-ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<title>JSP Page</title>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js" type="text/javascript"></script>
    <script src="js/module/module.js"  type="text/javascript" ></script>
    <script src="js/controller/controller.js" type="text/javascript" ></script>
</head>
<body>
    <div data-ng-controller="ContactController">           
        <table class="table table-striped table-bordered" bgcolor="orange" border="1">
            <thead>
                <tr>
                    <th>Name   </th>
                    <th>Email  </th>
                    <th>Phone  </th>
                    <th>Action </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contacts">
                    <td>{{ contact.name}}</td>
                    <td>{{ contact.email}}</td>
                    <td>{{ contact.phone}}</td>                       
                </tr>
            </tbody>
        </table>
    </div>
</body>


名称
电子邮件
电话
行动
{{contact.name}
{{contact.email}
{{contact.phone}

这里有一个正确的方法来处理你的承诺。在控制器中：

module.controller("ContactController", function($scope, $http, ContactService) {
    ContactService.list().then(function(data) {
        $scope.contacts = data;
    });
}

然后修改服务：

module.service('ContactService', function ($http) {

    this.getContacts = function () {
        return $http.get("/PersonalDetail/AngularServlet").then(function (data, status, header, config) {
            return contacts;
        }, function (data, status, header, config) {
            return null;
        });
    }

    this.list = function () {
        return this.getContacts();
    }
});

然后最重要的是，您应该从

list

方法（和

getContacts

）返回promise对象 var contacts=[{}]至var触点=[]
或者移除

var contacts = [{ }];
其次，在$http.get的成功中，设置联系人如下：

response.success(function(data, status, header, config) { $scope.contacts=data; // console.log("contacts: " + contacts); // return contacts; });

上述由“dfsq”提出的解决方案也很好，而且非常适合执行。
您可以尝试以下方法。这是一种干净且易于管理的方法。您需要使用AngularJS工厂作为服务，它将委托给控制器类，您的联系人将被推送到自己的数组范围。然后你可以简单地在前端循环，你就可以得到你的联系人。下面是代码：
服务

var module = angular.module('myApp', []); module.factory('ContactService', ['$http', function($http) { return { //You can add as many REST calls inside this return as you want getContacts: function(){ return $http.get("/PersonalDetail/AngularServlet").success(function(data){ return data; }) } }; });
控制器

var module = angular.module('myApp', []); module.controller('ContactController', ['$http', '$scope', 'ContactService', function($http, $scope, ContactService){ $scope.contacts = []; ContactService.getContacts().success(function(data){ //Depending on data structure in your REST call you might need first to loop the data $scope.contacts.push(data); }) }]);
index.html

<div data-ng-controller="ContactController"> <table class="table table-striped table-bordered" bgcolor="orange" border="1"> <thead> <tr> <th>Name </th> <th>Email </th> <th>Phone </th> <th>Action </th> </tr> </thead> <tbody> <tr ng-repeat="contact in contacts"> <td>{{ contact.name}}</td> <td>{{ contact.email}}</td> <td>{{ contact.phone}}</td> </tr> </tbody> </table> </div>

名称电子邮件电话行动 {{contact.name} {{contact.email} {{contact.phone}
希望这有帮助：）