Menu
I need your help to find out where's my error. I am using springboot(backend) x Angularjs(frontend). I get a GET (angular.js) files net::ERR_ABORTED when trying to load localhost:8080. I don't find any mistake on my angularfiles either. So here is my codes:
//for the springcontroller
@RestController
public class EmployeeController {
@Autowired
EmployeeService es;
@RequestMapping(method=RequestMethod.GET,value="/employees")
public List<Employee> getAllEmployees(){
return es.getAllEmployees();
}
@RequestMapping(method=RequestMethod.GET,value="/employees/{name}")
public Employee getEmployee(@PathVariable String name){
return es.getEmployee(name);
}
@RequestMapping(method=RequestMethod.POST,value="/employees")
public void addEmployee(@RequestBody Employee emp){
es.addEmployee(emp);
}
@RequestMapping(method=RequestMethod.PUT,value="/employees/{name}")
public void updateEmployee(@RequestBody Employee emp,@PathVariable String name){
es.updateEmployee(emp,name);
}
@RequestMapping(method=RequestMethod.DELETE,value="/employees/{name}")
public void deleteEmployee(@PathVariable String name){
es.deleteEmployee(name);
}
}
For my app.js:
(function(){
'use strict';
var app = angular.module('myApp',['ngRoute','myApp.controller']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'HomeController'
});
});
})();
For my HomeController.js
var module = angular.module('myApp.controller',['myApp.service']);
module.controller('HomeController',['$scope','HomeService',
function($scope,HomeService){
$scope.EmpData = [];
var onSuccess = function(response){
$scope.EmpData = response.data;
};
var onError = function(error){
console.log('Error fetching data...');
};
function getAllEmployees(){
HomeService.getAllEmployees().then(onSuccess,onError)
};
} //end of function
]);
For my HomeService.js
var module = angular.module('myApp.service',[]);
module.service('HomeService',['$http',function($http){
function doFetchEmployees(){
var response = $http.get("/employees");
return response;
};
return{
getAllEmployees : function(){
return doFetchEmployees();
}
};
}]);
And finally for my index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="src/main/resources/scripts/angular.min.js"></script>
<script src ="src/main/resources/scripts/angular-route.min.js"></script>
<script src="src/main/resources/app.js"></script>
<script src = "src/main/resources/HomeController.js"></script>
<script src ="src/main/resources/HomeService.js" ></script>
</head>
<body ng-app="myApp" ng-controller="HomeController">
<h2>Home</h2>
<br/>
<a href="#/index.html">Home</a>
<br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>telephone</th>
</tr>
</thead>
<tbody ng-repeat="emp in EmpData">
<tr>
<td>{{emp.name}}</td>
<td>{{emp.email}}</td>
<td>{{emp.address}}</td>
<td>{{emp.telephone}}</td>
</tr>
</tbody>
</table>
<br/>
<a href="http://localhost:8080/adduser.html">Create User</a>
</body>
</html>
And here are all my error message:
GET http://localhost:8080/src/main/resources/scripts/angular-route.min.js net::ERR_ABORTED
localhost/:7 GET http://localhost:8080/src/main/resources/app.js net::ERR_ABORTED
localhost/:5 GET http://localhost:8080/src/main/resources/scripts/angular.min.js net::ERR_ABORTED
localhost/:8 GET http://localhost:8080/src/main/resources/HomeController.js net::ERR_ABORTED
localhost/:9 GET http://localhost:8080/src/main/resources/HomeService.js net::ERR_ABORTED
localhost/:6 GET http://localhost:8080/src/main/resources/scripts/angular-route.min.js net::ERR_ABORTED
localhost/:7 GET http://localhost:8080/src/main/resources/app.js net::ERR_ABORTED
localhost/:8 GET http://localhost:8080/src/main/resources/HomeController.js net::ERR_ABORTED
localhost/:9 GET http://localhost:8080/src/main/resources/HomeService.js net::ERR_ABORTED
My index.html has no output just {{emp.names}} -> like this. I already tried putting the script tags inside the body but still the same. Hard cache reload & clear. still no luck. And Lastly when i try access localhost:8080 my eclipse console logs shows these 3 lines, is this also some cause of the error?
2017-10-18 10:31:22.115 INFO 9176 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring FrameworkServlet 'dispatcherServlet'
2017-10-18 10:31:22.115 INFO 9176 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : FrameworkServlet 'dispatcherServlet': initialization started
2017-10-18 10:31:22.127 INFO 9176 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : FrameworkServlet 'dispatcherServlet': initialization completed in 12 ms
I'm having a hard time trying to figure this out.
enter image description here
486
The problem was the full source path for the angular scripts.
I've changed it out into like this:
<script src="angular.js""></script>
<script src ="angular-route.min.js"></script>
<script src="app.js"></script>
<script src = "HomeController.js"></script>
<script src ="HomeService.js" ></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With