Encountering difficulties in resolving the HTML view with Spring Boot

After creating a Spring Starter Project in Eclipse, I only selected the Web dependencies checkbox. Despite writing a simple html file and controller, I keep encountering the Whitelabel Error Page. I have made the decision not to use any template engines right now, as we plan on incorporating AngularJS for the frontend later on. For the time being, my focus is solely on resolving this http page issue.

Controller:

package demo.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MyController {

    @RequestMapping(value="/")
    public String goHome(){
        return "home";
    }
}

Main class:

package demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootTest5Application {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootTest5Application.class, args);
    }
}

home.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.test</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>SpringBootTest5</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.2.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <start-class>demo.SpringBootTest5Application</start-class>
        <java.version>1.7</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Folder structure

Answer №1

<body data-ng-cloak>

is not considered valid XML and Thymeleaf validates the output. You have the option to either switch Thymeleaf template mode to "Legacy HTML5" or update your view (home.html) to

<body data-ng-cloak="">

Answer №2

It appears that a necessary templating engine dependency, like Thymeleaf, is not included in your project. To fix this issue, you can add the following code to your POM file:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Answer №3

Is there a mapping for resources in your spring-context configuration? It appears that the page "home" does not actually exist, but you may have a home.jsp file located in a folder like "jsp". To resolve this issue, you will need to configure your spring-context.xml file to properly handle the return String of Controller methods and map it to the correct path for the desired page. Here is an example:

<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>

This configuration instructs Spring to take the output from the Controller, add the specified prefix as the folder path, and append the suffix as the file extension to correctly locate the desired resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error occurred in Selenium WebDriver, causing an Exception to be thrown in the main thread with the message: "org.openqa.selenium.ElementNotInter

Experiment Scenario: Attempting to capture and evaluate Gmail Login functionality. Current Result: Upon running the WebDriver code, a Mozilla browser instance is launched. Although the username is successfully entered, the password field remains unfilled. ...

Tips on storing chosen language in local storage or cookies using AngularJS

As a newcomer to angularjs, I am facing the challenge of saving the selected language from a dropdown menu in HTML to either local storage or cookies. This way, when a user navigates to another page, the language they previously chose will be loaded and us ...

Finding the element and extracting its text value

Below is the HTML code: <span> <b>Order number:</b> </span> <span>A36HASJH</span> The value within the span element, A36HASJH, is dynamic and changes with each order. How can I identify this element and store it as a s ...

Can you explain the contrast between ng-init and the initialization of a controller?

There are multiple techniques to initialize a variable in Angular. One method is by using the ng-init directive: <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body& ...

What steps can be taken to verify if the userID retrieved from req.user in Passport JS matches the userID in MongoDB before making any updates or deletions

Currently, I am developing a voting application that includes a feature for authenticated users to delete and edit their own polls using Passport JS authentication. My Passport setup with Node/Express looks like this: passport.use(new FacebookStrategy({ ...

What is the best way to retrieve JSON values based on a key using JavaScript, jQuery, or AngularJS?

Here is some JSON data that I need help with: var jsonData = { "title": "Testing", "settings": { "mySettings": false }, "jsonList": ["TestingList"], "testJsonVals": { "Test1": { "name": "name1", ...

How can you access and utilize the inline use of window.location.pathname within a ternary operator in

I need assistance with writing a conditional statement within Angularjs. Specifically, I want to update the page to have aria-current="page" when a tab is clicked. My approach involves checking if the tab's anchor href matches the current window' ...

Utilizing AngularJS to dynamically load content within popups

How can I dynamically load my JSON data in a popup when a specific div is clicked? Here is my code: <div class="col-xs-12 col-sm-6 col-lg-4 checkContent" ng-repeat = "appreciate in CustAppre" ng-click = "openBigDiv()"> <div c ...

What is the process for extracting data from MS 97-2003 Worksheet using Selenium Webdriver?

I am attempting to access and read the .xls file (MS 97-20003 Worksheet) that has been downloaded from our application using Selenium WebDriver. However, I am encountering the following error: "org.apache.poi.poifs.filesystem.NotOLE2FileException: The sup ...

"Angular button for deleting an entire row from a table in one click

My table contains sample data along with a button within each row that is meant to delete the entire row when clicked. The issue is that my current code removes the content from the row but leaves behind the button and the row itself, or it deletes the las ...

Can several identical directives access and manipulate the same scope variable?

Is the scope of a controller shared when using the directive multiple times on one page? I'm not sure, but I would appreciate some help understanding this. If I define the variable 'isWidgetEnabled' in fooController, will it be shared betwe ...

Converting JSON into Java POJO objects with a dynamically generated key

I'm currently in the process of converting JSON to JAVA POJO. The JSON string I'm working with is structured as follows: { "api": { "results": 1, "fixtures": [ { "fixture_id": 38480 ...

Using TypeScript with Angular-UI Modals

Currently, my goal is to create a modal using angular-ui-bootstrap combined with typescript. To begin, I referenced an example from this link (which originally utilizes jQuery) and proceeded to convert the jQuery code into typescript classes. After succes ...

Looking to gather all property values from an array of objects and store them in individual arrays

Is there a simple way to collect each property value in an array of objects into separate property arrays using underscore or angularjs utilities? For instance, consider the following array of objects: $scope.expNumArray = []; $scope.itemHrArray = []; $s ...

Disabling form with customized component in AngularJS

I’ve been trying to find a solution, but I’m stuck on this. I created a custom directive called manyToOneSelect that fetches items from the server, displays them to the user, and allows the user to select one item. It’s working fine, but I can’t fi ...

Guide on correctly accessing an attribute in AngularJS directive validators

Currently, I am working on a validator that validates dates in the format of MM/YYYY. However, I am struggling to figure out how to access an attribute every time the model changes: <input id="my-date" validate-short-date data-max-date="{ ...

Challenge with Combining jQueryUI Tabs and AngularJS

I am encountering an issue with dynamically generating tabs using jQuery UI and AngularJS. I have created a directive to call the Tabs(jQuery-UI) initialization on a div tag that contains ul > li> a elements generated with ng-repeat. The problem seems to ...

Divide JSON arrays into separate select boxes

I have integrated AngularJS into certain sections of my website, rather than using it for the entire site. Currently, I am dealing with a scenario where I have a pair of select boxes, one dependent on the other. One box contains a list of countries, while ...

Which tool would be better for starting a new Angular project: angular-seed or yeoman?

I'm having trouble deciding on the best approach to create a new AngularJS application. There seem to be various methods available, such as using angular-seed from https://github.com/angular/angular-seed or yeoman - http://www.sitepoint.com/kickstar ...

AngularJS is throwing an error because the current.$$route object is not defined

Having worked with AngularJS, I encountered an error when trying to set a title. Here is my App.js 'use strict'; var serviceBase = 'http://www.yiiangular.dev/' var spaApp = angular.module('spaApp', [ 'ngRoute' ...