$ httpサービスが起動しておらず、ブラウザにエラーがありません

Question

AngularJSの新機能で、単純なPOCアプリケーションを作成しようとしていますが、ユーザーにメッセージを読み込もうとしていますが、$ HTTPサービスは起動していません。コンソールにエラーはありません。私はこの親切な提案を実装するためのより簡単な方法が必要であると確信しています。私のファイルは親切に助けて下さっています。ありがとうございます。

app.jsはファイル

'use strict'; 

var nkApp = angular.module("nkApp", [ 'ui.router' ]); 

nkApp.config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/home'); 

$stateProvider.state('site', { 
    'abstract' : true, 
    views : { 
     'navbar@' : { 
      templateUrl : 'app/components/navbar/partial-navbar.html' 
     }, 
     'content@' : { 
      templateUrl : 'app/components/home/partials/partial-home.html', 
      controller : 'homeCntrl' 
     }, 
     'footer@' : { 
      templateUrl : 'app/components/footer/partial-footer.html' 
     } 
    } 
}).state('home', { 
    parent : 'site', 
    url : '/home', 
    views : { 
     'content@' : { 
      templateUrl : 'app/components/home/partials/partial-home.html', 
      controller : 'homeCntrl' 
     } 
    } 
}).state('messagesByUsername', { 
    parent : 'site', 
    url : '/trading-api/messagesByUsername', 
    views : { 
     'content@' : { 
      templateUrl : 'app/entities/trading/messages/partials/partial-messages-by-username.html', 
      controller : 'messagesByUsernameCntrl' 
     } 
    } 
}).state('messagesByUsername.list', { 
    parent : 'site', 
    url : '/trading-api/messagesByUsername/list', 
    Params : { 
     messages : null 
    }, 
    views : { 
     'content@' : { 
      templateUrl : 'app/entities/trading/messages/partials/partial-messages-list-by-username.html', 
      controller : 'messagesListCntrl' 
     } 
    } 
    }); 
}); 

メッセージバイusername.html

<div class="content"> 
<div ng-controller="messagesByUsernameCntrl"> 
    <div class="jumbotron text-center"> 
     <form class="form-horizontal" name="messagesFrm" novalidate> 
      <div class="form-group form-group-lg"> 
       <div class="col-sm-10"> 
    <input ng-model="username" class="form-control"   
type="text" id="formGroupInputLarge" placeholder="User ID"></input> 
       </div> 
       <a ui-sref="messagesByUsername" 
class="btn btn-primary btn-lg">GO</a> 
      </div> 
     </form> 
    </div> 
    <div ui-view></div> 
    </div> 
</div> 

メッセージごとのユーザ名controller.js

'use strict'; 

angular.module("nkApp").controller(
'messagesByUsernameCntrl', 
[ 
    '$scope', 
    '$http', 
    '$state', 
    '$stateParams' , 
    'messagesService', 
    function($scope, $http, $state, $stateParams, messagesService) { 

     $scope.username = ""; 
     $scope.messages = []; 
     $scope.status = ""; 
     $scope.pageSize = 12; 
     $scope.pageTitle = "Member Messages"; 

     $scope.getMemberByUsername = function(data) { 
     console.log("Getting Messages For User : " 
      + $scope.username); 
     messagesService.getMemberMessagesByUsername(
      $scope.username).then(function(data) { 
      console.log("Messages : " + data); 
      $stateParams.messages = data; 
     }, function(response) { 
      console.log("Error Status : " + response.status); 
      $scope.status = response.status; 
     }); 
     } 
    } ]); 

メッセージ・リスト・バイ-username.html

<div class="content"> 
<h3>Messages List</h3> 
<div ng-controller="messagesListCntrl"> 
    <div ng-repeat="message in messagesList"> 
     <div class="col-sm-10 col-xs-12"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <div class="page-header section-title">{{pageTitle}} 
</div> 
       </div> 
       <div class="container content col-sm-2 col-lg-12"> 
        <table class="row-border hover"> 
         <thead> 
          <tr> 
           <th width="150px">Username</th> 
           <th width="150px">FirstName</th> 
           <th width="150px">LastName</th> 
           <th width="150px">Email</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>{{member.username}}</td> 
           <td>{{member.firstName}}</td> 
           <td>{{member.lastName}}</td> 
           <td>{{member.email}}</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

あなたのサービスで

メッセージ・リスト・バイ・ユーザ名controller.js

'use strict'; 

angular.module("nkApp").controller('messagesListCntrl', 
[ '$scope', '$stateParams', function($scope, $stateParams) { 

    console.log("Params : " + $stateParams.messages); 
    $scope.messagesList = $stateParams.messages; 
} ]); 

index.htmlを

<!DOCTYPE html> 
    <html ng-app="nkApp"> 
     <head> 
    <link rel="stylesheet" href="/css/app.css"> 
    <link rel="stylesheet"  
    href="/node_modules/bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap- 
    theme.min.css"> 
    <link href="/node_modules/font-awesome/css/font-awesome.min.css" 
    rel="stylesheet"> 
    </head> 
    <body> 

<div ui-view="navbar"></div> 

<div class="container"> 
    <div ui-view="content"></div> 
</div> 

<div ui-view="footer" class="footer"></div> 

<script src="node_modules/jquery/dist/jquery.min.js"></script> 
<script src="node_modules/datatables/media/js/jquery.dataTables.min.js"> 
</script> 
<script src="node_modules/angular/angular.min.js"></script> 
<script src="node_modules/angular-ui-router/ 
release/angular-ui-router.min.js"></script>  
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 

<script type="text/javascript" src="/app/app.js"></script> 

<script src="/app/components/home/controller/home-controller.js"></script>  


<script src="/app/entities/trading/messages/controller/ 
messages-by-username-controller.js"></script> 
<script src="/app/entities/trading/messages/controller/messages-list-by- 
username-controller.js"></script> 
<script src="/app/entities/trading/messages/service/messages-service.js"> 
</script> 
</body> 

メッセージ-service.js

'use strict'; 

    angular.module('nkApp').factory('messagesService', [ '$http', 

    function($http) { 

var service = {}; 
var response = {}; 

service.getMemberMessagesByUsername = function(username) { 
console.log("Getting Messages For User : [" + username + "]"); 
response = $http.get("/trading-api/messages/" + username); 
return response; 
} 
return service; 
    } ]); 

Answer 1

、追加

.then(function(response) { 
     return response.data}) 

〜$http.get呼び出し。など、あなたが前にそれをやった、あなたのコントローラでは、サービスを呼び出す方法：

...... 
messagesService.getMemberMessagesByUsername(paramYouPassHere).then(function(messages) { 
    $scope.messages = messages; 
}); 
...... 

'use strict'; 

angular.module('nkApp').factory('messagesService', messageService); 

function messageService($http) { 

    function getMemberMessagesByUsername (username) { 
     return $http.get("/trading-api/messages/" + username).then(function(response) { 
      return response.data || null; 
     }, function(response) { 
      return {}; 
     }); 
    }; 
    return { 
     getMemberMessagesByUsername:getMemberMessagesByUsername 
    }; 
}; 

EDIT2：私はあなたのサービスを変更した：または

return $http.get("/trading-api/messages/" + username) 
    .then(function(response) { return response.data}) 

編集に変更します