Tak jak w temacie jak ten Angular powinien być skonfigurowany ze Spring Boot.
Struktura mojego projektu: w załączniku
Mój MainController:
@Controller
public class MainController {
@RequestMapping(value="/",method = RequestMethod.GET)
public String homepage(){
return "index";
}
}
Mój PostController
@Controller
public class PostController {
private final PostService postService;
@Autowired
public PostController(PostService postService) {
this.postService = postService;
}
@RequestMapping(value = "/users", method = RequestMethod.GET)
@ResponseBody
public List<Post> showPublishedPosts() {
List<Post> posts = postService.findAllPublishedPosts();
return posts;
}
}
Mój application.properties
spring.mvc.view.prefix=/views/
spring.mvc.view.suffix=.html
Mój app.js
var myApp = angular.module('app', ['ngRoute','ngResource']);
myApp.config(function($routeProvider){
$routeProvider
.when('/users',{
templateUrl: '/views/blog/users.html',
controller: 'usersController'
})
.when('/roles',{
templateUrl: '/views/blog/roles.html',
controller: 'rolesController'
})
.otherwise(
{ redirectTo: '/'}
);
});
Mój controller.js
myApp.controller('usersController', function($scope, $http) {
$http.get('http://localhost:8080/users').
success(function(data) {
console.log("ok");
$scope.posts = data;
});
});
myApp.controller('rolesController', function($scope) {
$scope.headingTitle = "Roles List";
});
Mój index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/lib/bootstrap/bootstrap.css"/>
<link rel="stylesheet" href="/css/lib/bootstrap/bootstrap-theme.css"/>
<link rel="stylesheet" href="/css/app.css"/>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lobster&;subset=latin,latin-ext"/>
<title>AS</title>
</head>
<body>
<h2>Administrator Panel</h2>
<div class="home-section">
<ul class="menu-list">
<li><a href="#/users">Users</a></li>
<li><a href="#/roles">Roles</a></li>
</ul>
</div>
<div ng-view=""></div>
<script src="/js/lib/angular/angulars.js"></script>
<script src="/js/lib/angular/angular-resource.js"></script>
<script src="/js/lib/angular/angular-route.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controller/controller.js"></script>
</body>
</html>
Wcześniej już udało mi się to ogarnąć i wszystko działało jak należy, ale po ponownym uruchomieniu projektu znowu nie ma żadnej reakcji. Strona index.html pięknie się ładuję, ale jak chcę kliknąć na Users lub Roles to kompletnie nie się nie dzieje. Nie ładuje się żadna treść z users.html/roles.html. Nawet w konsoli w Chromie nie wypisuje się console.log("ok"); WTF. Mam ktoś jakieś swoje pomysły, wiedzę jak to powinno być ogarnięte?