Unknown Provider error using AngularJS

I am new in using AngularJS and have the following error:

angular.js:14525 Error: [$injector:unpr] Unknown provider: reservationsFactoryProvider <- reservationsFactory <- MainPageController <- RecordsController

my main jsp page is

`<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!doctype html>
<html data-ng-app="serverApp">
<head>
    <script src="./resources/js/libs/angular.js"></script>
    <script src="./resources/js/libs/angular-route.js"></script>
    <script type="text/javascript" src="./resources/js/libs/angular-resource.js"></script>
    <link rel="stylesheet" type="text/css" href="./resources/css/style.css" >
</head>
<body>

<!-- header begin -->
<div id="top"></div>
<div id="link_bar">
    &nbsp;&nbsp;&nbsp;<a href="#!/main_page">Main</a>&nbsp;|&nbsp;Products&nbsp;|&nbsp;Contact us
</div>
<div id="login_bar">
</div>
<div id="submenu"> Reserved Area:&nbsp;&nbsp;&nbsp;<a href="#!/reserved_area">View1</a>&nbsp;|&nbsp;View2</div> 
<div id="partials">
    <div data-ng-view></div>
</div>
<div id="bottom"></div>
<script src="./resources/js/app.js"></script>
</body>
</html>`

and .js file:

    var serverApp = angular.module('serverApp', [ 'ngRoute' , 'ngResource' ]);

serverApp.config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/main_page', {
        templateUrl: './resources/partials/part_main.jsp',
        controller: 'MainPageController'
    });
    $routeProvider.when('/reserved_area', {
        templateUrl: './resources/partials/part_reserv.jsp',
        controller: 'RecordsController'
    });
    $routeProvider.otherwise({redirectTo: '/main_page'});
}]);


serverApp.controller('MainPageController', ['$scope', '$rootScope', '$routeParams', 'reservationsFactory',
    function ($scope, $rootscope, $routeParams, reservationsFactory) {

    }
]);

serverApp.controller('RecordsController', ['$scope', '$rootScope', '$routeParams', '$location', 'reservationsFactory','slotsFactory',
    function ($scope, $rootScope, $routeParams, $location, recordsFactory) {
    $scope.test="BLABLA";
    console.log("Controller works");
    var promRecords=recordsFactory.query();//not ready
     var records=[]

     $scope.records=records;

     promRecords.$promise.then(
             function(result){
                 for (var i = 0; i < result.length; i++) {
                     reservations[i]=result[i];
                 }             
                 console.log("DATA ARRIVED!");
             } ,
             function(error) {
                 alert("You must be logged in!");
             }
     );

    }]
);

serverApp.factory('recordsFactory',['$resource',function ($resource){
    return $resource("http://localhost:8080/My_Server/records",null,{ 'update': {method: 'PUT'} });
}]);

What am I doing wrong?

You have registered recordsFactory (serverApp.factory('recordsFactory',...), you have to also register reservationsFactory and slotsFactory is the same way as Angular factory.