Why is the page not rendering?

Question

Java

Now I started digging towards Spring (well, I picked up angular.js according to the official tutorials) The
task is: render the upload.html page

Controller for upload:

package application;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
@RequestMapping("/upload")
public class FileUploadController {

    @RequestMapping(value="/upload", method=RequestMethod.GET)
    public @ResponseBody String provideUploadInfo() {
        return "Вы можете загружать файл с использованием того же URL.";
    }

    @RequestMapping(value="/upload", method=RequestMethod.POST)
    public @ResponseBody String handleFileUpload(@RequestParam("name") String name,
                                                 @RequestParam("file") MultipartFile file){
        if (!file.isEmpty()) {
            try {
                byte[] bytes = file.getBytes();
                BufferedOutputStream stream =
                        new BufferedOutputStream(new FileOutputStream(new File(name + "-uploaded")));
                stream.write(bytes);

                System.out.println(bytes.toString());

                stream.close();
                return "Вы удачно загрузили " + name + " в " + name + "-uploaded !";
            } catch (Exception e) {
                return "Вам не удалось загрузить " + name + " => " + e.getMessage();
            }
        } else {
            return "Вам не удалось загрузить " + name + " потому что файл пустой.";
        }




    }

}

+ angular.js controller

angular.module('hello', [ 'ngRoute' ]).config(function($routeProvider, $httpProvider) {

  $routeProvider.when('/', {
    templateUrl : 'home.html',
    controller : 'home'
  }).when('/login', {
    templateUrl : 'login.html',
    controller : 'navigation'
  }).when('/upload', {
    templateUrl : 'upload.html',
    controller : 'upload'
  }).otherwise('/');



}).controller(
    'navigation',

    function($rootScope, $scope, $http, $location, $route) {

      $scope.tab = function(route) {
        return $route.current && route === $route.current.controller;
      };

      var authenticate = function(credentials, callback) {

        var headers = credentials ? {
          authorization : "Basic "
              + btoa(credentials.username + ":"
                  + credentials.password)
        } : {};

        $http.get('user', {
          headers : headers
        }).success(function(data) {
          if (data.name) {
            $rootScope.authenticated = true;
          } else {
            $rootScope.authenticated = false;
          }
          callback && callback($rootScope.authenticated);
        }).error(function() {
          $rootScope.authenticated = false;
          callback && callback(false);
        });

      }

      authenticate();

      $scope.credentials = {};
      $scope.login = function() {
        authenticate($scope.credentials, function(authenticated) {
          if (authenticated) {
            console.log("Login succeeded")
            $location.path("/");
            $scope.error = false;
            $rootScope.authenticated = true;
          } else {
            console.log("Login failed")
            $location.path("/login");
            $scope.error = true;
            $rootScope.authenticated = false;
          }
        })
      };

      $scope.logout = function() {
        $http.post('logout', {}).success(function() {
          $rootScope.authenticated = false;
          $location.path("/");
        }).error(function(data) {
          console.log("Logout failed")
          $rootScope.authenticated = false;
        });
      }

    }).controller('home', function($scope, $http) {
      $http.get('/resource/').success(function(data) {
        $scope.greeting = data;
    })
}).controller('upload', function($scope, $http) {
  $http.get('upload').success(function(data) {
    $scope.greeting = data;
  })
  });

Can you tell me how to render the template? All other pages come up fine. upload - only in json

+ in the address bar there is this thing: localhost:8080/#/upload
this lattice on all pages
how can I remove it?

Answer 1

1. to remove the grid you need to enable html5mode in angular:

config(['$locationProvider', 
    function($locationProvider) {
        $locationProvider.html5Mode(true);
    }
]);

Show your upload.html file.