AngularJS ng-view返回Whitelabel错误页面

时间:2017-11-05 19:52:34

标签: javascript angularjs spring-boot

  

我想整合Spring启动,百万美元模板和angularjs。当我   添加到我的index.html模板,它给我Whitelabel错误   页。我不知道导致错误的是什么。

     

这是我的index.html

   <!DOCTYPE html>
<html xmlns:th="http:/www.thymeleaf.org">
    <head>
        <title>Spring Boot Application</title>
        <link rel="stylesheet" th:href="@{/}"/>
        <link rel="stylesheet" th:href="@{/bootstrap.css}"/>
        <link rel="stylesheet" th:href="@{/bootstrap.min.css}"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    </head>
    <body ng-app="myApp">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">WebSiteName</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                  <li><a href="#!loginbutton"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
          </div>
        </nav>
        <div ng-view></div>

        <script type="text/javascript">
            var app = angular.module("myApp", ["ngRoute"]);
            app.config(function($routeProvider) {
                $routeProvider.when("/loginbutton", {templateUrl: "login.html"});
            });

        </script>
    </body>
</html>
  

我的控制器

    package com.spring.springbootapplication.controller;

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

@Controller
public class springbootapplicationController {

    @RequestMapping("/")
    public String welcomeController(ModelMap model) {
        model.put("welcome", "Spring boot application");
        return "index";
    }

    @RequestMapping("/loginbutton")
    public String loginController() {
        return "login";
    }
}
  

嗯,我只是在玩角度和弹簧靴。

1 个答案:

答案 0 :(得分:0)

首先,同时使用thymleaf和angular是非常奇怪的。它们都是前端技术,但它们的使用是不同的。

如果你想使用百里香,那么你必须添加模型,但在你的例子中不需要建模。但是,如果您想使用Angular,则需要使用REST进行BackEnd。

所以,首先删除所有有角度的东西

看来,你正在使用maven,并将索引html设置在资源中的适当文件夹中。所以,如果您的应用程序在端口8080上运行,那么您只需要转到

localhost:8080/然后它应该显示