2017-06-30 11 views
0

J'utilise AngularJS ngRouter dans l'application Spring MVC. Lorsque l'application est lancée, elle doit rediriger vers la page de connexion (http://localhost:8080/TimeLee/login). Mais il est redirigeant vers url http://localhost:8080/TimeLee/#!/ au lieu de la page de connexionrouteur AngularJS allez être redirigé vers #!/Au lieu de la page de connexion

Redirected Page

index.jsp

<!DOCTYPE html> 
<html data-ng-app="index"> 
<head> 
<title>Hello User</title> 
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 

    <script> 

    var App = angular.module('index',[ 'ngRoute' ]); 

    App.config(function($routeProvider,$locationProvider) 
    { 
     $routeProvider 
     .when('/login', { 
     templateUrl : 'login/login', 
     controller : 'loadLoginPage' 
     }) 
     .when('/home', { 
       templateUrl : 'login/home', 
       controller : 'loadLoginPage' 
       }) 
     .when('/', { 
      templateUrl : 'login/', 
      controller : 'loadLoginPage' 
     }) 

     .otherwise({ 
      redirectTo : '/', 
     }); 
     }); 

    App.controller('loadLoginPage', ['$window','$location', function($window,$location) 
    { 
     //$window.location.href='http://localhost:8080/TimeLee/login/'; 
    }]); 

    </script> 
</head> 

<body> 
    <div data-ng-controller="loadLoginPage">    
    </div> 
</body> 
</html> 

contrôleur principal:

package com.timelee.common.controllers; 

import com.timelee.common.services.LoginService; 
import com.timelee.users.model.User; 

import java.util.HashMap; 
import javax.servlet.http.HttpServletRequest; 
import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.http.HttpStatus; 
import org.springframework.http.ResponseEntity; 
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; 

@Controller 
@RequestMapping("/login") 
public class MainController 
{ 
    @Autowired 
    private LoginService loginService; 

    @RequestMapping(value="/login",method=RequestMethod.GET) 
    public String getLogin() 
    { 
     System.out.println("Inside /login"); 
     return "login"; 
    } 

    @RequestMapping(value="/",method=RequestMethod.GET) 
    public String loadLoginPage() 
    { 
     System.out.println("Inside /"); 
     return "login"; 
    } 

    @RequestMapping(value="/loginAction",method=RequestMethod.GET) 
    @ResponseBody 
    public ResponseEntity<HashMap> loginAction(@RequestParam("user_name") String user_name,@RequestParam("user_password") String user_password, HttpServletRequest request) 
    { 
     HashMap map=loginService.validateLogin(user_name,user_password); 
     return ResponseEntity.status(HttpStatus.ACCEPTED).body(map); 
    } 

    @RequestMapping(value="/home",method=RequestMethod.GET) 
    public String redirectHome() 
    { 
     return "login"; 

    } 

    @RequestMapping(value="/homepage",method=RequestMethod.GET) 
    public String loadHomePage() 
    { 
     return "home"; 

    } 

} 
+0

Pourquoi avez-vous commentiez $ window.location.href = 'http: // localhost: 8080/TimeLee/login /'; –

Répondre

0

d'abord changer votre autrement route vers ci-dessous montre & supprimer "/" route

.otherwise({ 
     redirectTo : '/login', 
}); 

Ceci redirigera votre page pour la page de connexion, mais il sera toujours # dans votre URL (mode par défaut Hashbang). Pour supprimer que vous avez à utiliser le fournisseur de savoir $locationProvider.html5Mode(true); service de localisation $ l'intérieur du bloc de configuration de votre module angulaire. Cela va réécrire l'url en mode html5 simple. https://docs.angularjs.org/guide/$location

Pour ajouter des modèles pour différentes routes, suivez la structure de documentation officielle.

+0

Cela n'a pas résolu mon problème. Il remplace le nom de l'application par "/ login". url final ressemble à ceci 'http: // localhost: 8080/login' – John

+0

Si vous voulez @John l'URL pour être exact alors, ajoutez simplement la route lorsque des méthodes "chemin" comme/TimeLee/login,/TimeLee/home: suite ma réponse ci-dessus redirectTo url sera/TimeLee/login (tout le reste devrait être identique). Et l'url de modèle doit également avoir le chemin du fichier de modèle, si vous l'avez à partir de backend, alors ça va. – Shantanu

0

Vous devez comprendre que lorsque vous travaillez avec AngularJS en tant que framework frontal, vous ne travaillez plus avec le modèle & comme vous le faites habituellement lorsque vous travaillez avec JSP comme moteur de template.

Vous devez faire votre application charger votre index page principale, la page où AngularJS injecte son point de vue. Et vous allez communiquer en utilisant HTTP REST entre vos contrôleurs Spring et AngularJS.

Votre itinéraire réel et des vues de commutation seront prises dans votre AngularJS frontal en utilisant $location.path("/your/path")

Qu'est-ce que vous obtenez: #!/ est-prefectly normal dans AngularJS, voici comment AngularJS traite ses routes et injectent sa propre vue demandée.