ngRoute 在 Spring Boot 中不起作用答案

【问题标题】：ngRoute not working in Spring BootngRoute 在 Spring Boot 中不起作用
【发布时间】：2017-08-17 18:07:53
【问题描述】：

我正在使用 Spring Boot 和 Angular JS 开发单页应用程序。我设置了 Rest Controller、索引页面和一些 HTML 页面。当我运行应用程序时，Spring Boot 应该加载索引页面并在基于负载的 ngRoute 配置上重定向到登录页面。相反，它会加载索引页面并且不会重定向到登录页面。 Github上传代码：Click here for Github Repository

GreetingController：

package com.example.demo.controllers;

import java.util.HashMap;
import java.util.Map;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;


@RestController
public class GreetingController 
{
    @RequestMapping("/greeting")
    public Map<String,Object> home() 
    {
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", "Test Id");
        model.put("content", "Hello World");
        return model;
    }
}

index.html

<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src= "https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-cookies.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </script>

<script>

var App = angular.module('loginPage',['ngRoute']);  
App.config(function($routeProvider, $httpProvider,$locationProvider) 
{

    $routeProvider.when('/', {
        templateUrl : 'login.html',
        controller : 'loginController',
          controllerAs: 'controller'
    })
    .when('/login', {
        templateUrl : 'login.html',
        controller : 'loginController',
          controllerAs: 'controller'
    })
    .when('/home', {
        templateUrl : 'home.html',
        controller : 'homeController',
          controllerAs: 'controller'
    }).
  otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(
            {
              enabled: true,
              requireBase: false,
              //rewriteLinks: false
            });
    //$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

  });

App.controller('homeController',['$window','$scope','$http',function($window,$scope,$http)
{
    $scope.message="Home Controller";
    $scope.validateLoginDetails=function()
    {
        $http.get('/greeting/').then(
        function success(response) 
        {
            $scope.responseText = response.data;
          },

        function failure(response)
          {
                $scope.responseText = response.data; 
          });

    };
}]);

App.controller('loginController',['$window','$scope','$http',function($window,$scope,$http)
    {
    $scope.message="Login Controller";
        $scope.validateLoginDetails=function()
        {
            $http.get('/greeting/').then(
            function success(response) 
            {
                $scope.responseText = response.data;
              },

            function failure(response)
              {
                    $scope.responseText = response.data; 
              });

        };
    }]);

App.controller('indexController',['$window','$scope','$http',function($window,$scope,$http)
    {
        $scope.message="Index Controller";
        $scope.validateLoginDetails=function()
        {
            $http.get('/greeting/').then(
            function success(response) 
            {
                $scope.responseText = response.data;
              },

            function failure(response)
              {
                    $scope.responseText = response.data; 
              });

        };
    }]);

</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body data-ng-app="loginPage">

<div class="container" data-ng-controller="indexController">
  <h2>Login</h2>
  <a href="login" >Click here for login page</a>
   <h1>Inside Index Page</h1>

  <p>Response:  {{responseText}}</p>
</div>
</body>
</html>

login.html

<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src= "https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-cookies.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </script>

<script>
var cookies = document.cookie;
console.log('Login Page Cookies :'+cookies)


var App = angular.module('loginPage',['ngRoute','ngResource','ngCookies']); 
App.config(function($routeProvider, $httpProvider) 
{
    $routeProvider.when('/', {
        templateUrl : 'login.html',
        controller : 'validateForm'
    })
    .when('/login', {
        templateUrl : 'login.html',
        controller : 'validateForm'
    }).otherwise('/');

    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

  });

App.controller('validateForm',['$window','$scope','$http','$cookies',function($window,$scope,$http,$cookies)
{
    $scope.validateLoginDetails=function()
    {
        $http.get('/greeting/').then(
        function success(response) 
        {
            $scope.responseText = response.data;
          },

        function failure(response)
          {
                $scope.responseText = response.data; 
          });

    };
}]);

</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body data-ng-app="loginPage">

<div class="container" data-ng-controller="validateForm">
  <h2>Login</h2>

    <div class="form-group">
      <label for="email">Username:</label>
      <input type="email" class="form-control" data-ng-model="user_name" name="user_name"  id="user_name" placeholder="Enter Username" name="email" style="max-width:700px">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password"  data-ng-model="user_password" name="user_password" id="user_password" class="form-control" placeholder="Enter password" name="pwd"  style="max-width:700px">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember-me"> Remember me</label>
    </div>
    <button type="button"  class="btn btn-primary content_login btn-lg"  data-ng-click="validateLoginDetails()">Login</button>
    <br/> <br/>
        <a class="col-md-offset-2" style="margin-left: 2px" href="forgotpassword.html">Forgot password?</a> <br/> <br/>
        <a class="col-md-offset-2" style="margin-left: 2px" href="register.html">Request New Account</a>

  <p>Response:  {{responseText}}</p>
</div>
</body>
</html>

【问题讨论】：

首先我在主 html 文件中看不到 ng-view 指令。并且不需要将ng-app 和ng-controller 放入模板中，例如login.html 文件。
您的问题到底是什么？问候控制器与您的问题有什么关系？为什么Spring要重定向？为什么你认为 Spring Boot 关心角度路由的配置？为什么你首先有两个不同的角度 HTML 页面？最后，您在做什么，您希望发生什么，以及会发生什么？
我正在使用 Spring Boot 开发 Restful 服务。访问 localhost:8080/greeting 返回 JSON 输出。然后我想用Angular JS实现登录页面，主页。所以，我在加载索引页面时重定向到 /login 。除了 Rest Controller，如果您已经完成了上述问题中的所有说明。

标签： angularjs spring-boot

【解决方案1】：

哈迪是对的。 ngRoute 适用于ngView。您的 HTML 中应该有 <div ng-view> </div。 ngRoute 从 REST Controller 获取数据并显示在与 ngView 关联的 div 标记中。如果你想重定向到不同的页面，那么你应该考虑使用

$window.location.href="/login.html";。

如果这有帮助，请告诉我。有关 ngView

的更多信息，请参阅 Angular JS documentation

【讨论】：