0
すべてのメッセージを表示する単純なページを読み込む際に問題があります。私はバックエンドのフロントエンドとスプリングブートアプリケーションのためのalgularを使用しています。ページ（localhost：8080/messages）を読み込もうとすると、ページが空白になり、メッセージとともにJSONをダウンロードできます。何か案が？ Ps。 ViewAllMessages.htmlで私はページが実行されているときにチェックする定数テキストを書きます。Java Spring起動時にページが読み込まれない理由Angularjs
MessageController：
@RestController
@RequestMapping("/api/message")
public class MessageController {
private final Logger LOG = LoggerFactory.getLogger(MessageController.class);
@Autowired
private MessageService messageService;
@RequestMapping(value = "/all", method = GET)
public List<MessageDTO> findAll() {
LOG.info("Received request to all messages.");
return messageService.findAll();
}
}
main.js
var chatApp = angular.module('chat', ['ngRoute']);
chatApp.config(function ($routeProvider) {
$routeProvider
.when('/messages',
{
controller: 'AllMessagesController',
templateURL: '/partials/ViewAllMessages.html'
})
.otherwise({redirectTo: '/'});
});
chatApp.service('messageService', function(){
var message = {};
var addMessage = function (v) {
message = v;
};
var getMessage = function(){
return message;
};
return {
addMessage: addMessage,
getMessage: getMessage
};
});
chatApp.controller('AllMessagesController', function($scope, $window, $http){
$scope.transfer = {};
$scope.error = false;
$http
.get('/api/message/all')
.then(function(response) {
$scope.messages = response.data;
log.console(response.data);
});
});
index.htmlを
<!doctype html>
<html>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="css/office.css" rel="stylesheet">
<style type="text/css"> </style>
<body>
<script src="js/angular-route.min.js" type="text/javascript"></script>
<script src="js/angular-resource.min.js" type="text/javascript"></script>
<script src="js/main.js"></script>
<script src="js/angular.min.js" type="text/javascript"></script>
</body>
</html>
ViewAllMessages.html
<div class="container">
<div class="col-md-6">
<div class="row">
<div class="col-md-2">
<h2>Wiadomosci</h2>
</div>
</div>
</div>>
<div class="section">
<h3>{{headingTitle}}</h3>
<div>
<ul type="square">
<li>Luke</li>
<li>Darth</li>
<li>Anakin</li>
<li>Leia</li>
</ul>
</div>
</div>
<div class="panel panel-default" ng-repeat="message in messages">
<div class="row">
<div class="col-md-2">
<div class="panel-default"> {{message.id}}</div>
</div>
<div class="col-md-2">
<div class="panel-default"> {{message.message}}</div>
</div>
</div>>
</div>
</div>
まず最初に、index.htmlにスクリプトのインポート順序を示します。そのため、firs angular.min.jsを配置してみてください。 –
私はそれをしましたが、仕事はしませんでした/ –