我是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 : {
'[email protected]' : {
templateUrl : 'app/components/navbar/partial-navbar.html'
},
'[email protected]' : {
templateUrl : 'app/components/home/partials/partial-home.html',
controller : 'homeCntrl'
},
'[email protected]' : {
templateUrl : 'app/components/footer/partial-footer.html'
}
}
}).state('home', {
parent : 'site',
url : '/home',
views : {
'[email protected]' : {
templateUrl : 'app/components/home/partials/partial-home.html',
controller : 'homeCntrl'
}
}
}).state('messagesByUsername', {
parent : 'site',
url : '/trading-api/messagesByUsername',
views : {
'[email protected]' : {
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 : {
'[email protected]' : {
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;
} ]);
你在哪裏定義messagesService?你在哪裏做$ http電話?我沒有看到你的代碼?嘗試構建一個小提琴/ plunkr/jsbin /等,以便更容易地發現 – flashjpr
現在只需添加服務代碼。 – Kash
和console.log(「Messages:」+ data);不返回任何東西?沒有日誌,沒有? – flashjpr