带angularJS路由的Spring MVC_Angularjs_Spring_Model View Controller

带angularJS路由的Spring MVC

angularjs spring model-view-controller

带angularJS路由的Spring MVC,angularjs,spring,model-view-controller,Angularjs,Spring,Model View Controller,您好，我正在使用spring MVC构建应用程序，我想使用AngularJS路由，但我开发它的方式是，路由没有发生。我不想构建SPA（单页应用程序），但在收到请求后，像spring一样工作的应用程序将找到匹配控制器并进行处理下面是我的项目结构 index.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCT

您好，我正在使用spring MVC构建应用程序，我想使用AngularJS路由，但我开发它的方式是，路由没有发生。我不想构建SPA（单页应用程序），但在收到请求后，像spring一样工作的应用程序将找到匹配控制器并进行处理

下面是我的项目结构

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script>
window.open('http://localhost:8080/SpringApp/loginPage.do',
        '_top','toolbar=no, location=no, status=yes, menubar=no, scrollbars=yes,resizable=1,width=1000,height=580,left=0,top=0');
</script>
</body>
</html>

LoginController.java

package com.pack.controller;

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


@Controller
public class IndexController {

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String root() {
        return "index";
    }
}

package com.pack.controller;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.pack.bean.User;

@Controller("loginController")
public class LoginController {

    static List<User> users = null;
    boolean isExist = false;

    static{
        users = new ArrayList<User>();
        User user = new User();
        user.setLoginId("Yatin");
        user.setUserName("abc");
        users.add(user);
        user = new User();
        user.setLoginId("admin");
        user.setUserName("admin");
        users.add(user);
    }

    @RequestMapping(value="loginPage", method=RequestMethod.GET)
    public String showForm(@ModelAttribute("login") User user) {
        System.out.println(users);
        return "login"; 
    }

    @RequestMapping(value = "loginUser", method = RequestMethod.POST)
    public String addContact(@ModelAttribute("login")User user,HttpServletRequest req,
            final RedirectAttributes redirectAttributes){

        for(User u : users){

            if(user.getLoginId().toLowerCase().equals(u.getLoginId().toLowerCase()) && user.getUserName().equals(u.getUserName())){
                isExist = true;
                System.out.println("Login : isExist : "+isExist);
            }           
        }

        System.out.println("LoginId : "+user.getLoginId()+" : Password : "+user.getUserName());
        if((user.getLoginId()!= null && !"".equals(user.getLoginId())) && (user.getUserName()!= null && !"".equals(user.getUserName())) && isExist == true){
            req.getSession().setAttribute("user", user);
            //return "redirect:addContact.do";
            return "redirect:dashBoard.do";
        }else if((user.getLoginId()== "") && (user.getUserName()== "")){
            redirectAttributes.addFlashAttribute("loginMessage","Login and Password cannot be blank.");
            return "redirect:loginPage.do";
        }else{
            redirectAttributes.addFlashAttribute("loginMessage","Invalid login credentials.Please login again.");
            return "redirect:loginPage.do";
        }
    }

    @RequestMapping(value = "logout", method = RequestMethod.GET)
    public String getLogOut(HttpServletRequest req){
        System.out.println(".....logging out");
        req.getSession(false).invalidate();
        return "redirect:/";
    }
}

package com.pack.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.pack.bean.Contact;
import com.pack.service.MyService;

@Controller("myController")
@SessionAttributes
public class MyController {

    @Autowired
    MyService ms;

    @Autowired
    Contact contact;

    @RequestMapping(value="dashBoard", method=RequestMethod.GET)
    public String showDash() {
        return "homeApp";   
    }

    @RequestMapping(value="addContact", method=RequestMethod.GET)
    public String showForm(@ModelAttribute("contact") Contact cntc) {
        return "addContact";    
    }

    @RequestMapping(value="contact", method=RequestMethod.POST)
    public String addCustomer(@ModelAttribute("contact") Contact cntc,
            final RedirectAttributes redirectAttributes) {

        System.out.println("You entered "+cntc.getUserName()+" and "+cntc.getContactNo());
        contact = ms.setMyContact(cntc);
        System.out.println("after set : "+contact.getUserName()+" : and : "+contact.getContactNo());        

        redirectAttributes.addFlashAttribute("contact", cntc);
        redirectAttributes.addFlashAttribute("message","Added successfully.");

        return "redirect:contacts.do";  
    }

    @RequestMapping(value="contacts", method=RequestMethod.GET)
    public String showCustomer(@ModelAttribute("customer") Contact cntc) {
        System.out.println("cntc:" + cntc.getUserName());
        return "contact";
    }

    public Contact _getContact(Contact ct){
        return ms.getMyContact(ct);     
    }
}

Contact.java

package com.pack.bean;

import org.springframework.stereotype.Component;

@Component
public class Contact {

    private String userName;
    private String contactNo;

    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getContactNo() {
        return contactNo;
    }
    public void setContactNo(String contactNo) {
        this.contactNo = contactNo;
    }

    @Override
    public String toString() {
        return "Contact [userName=" + userName + ", contactNo=" + contactNo
                + "]";
    }
}

User.java

package com.pack.bean;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

@Component
@Scope("session")
public class User {

    private String loginId;
    private String userName;

    public String getLoginId() {
        return loginId;
    }

    public void setLoginId(String loginId) {
        this.loginId = loginId;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    @Override
    public String toString() {
        return "User [loginId=" + loginId + ", userName=" + userName + "]";
    }
}

MyService.java

package com.pack.service;

import com.pack.bean.Contact;

public interface MyService {

    Contact getMyContact(Contact ct);
    Contact setMyContact(Contact c);
}

MyServiceImpl.java

package com.pack.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.pack.bean.Contact;
import com.pack.dao.MyDao;

@Service("myService")
public class MyServiceImpl implements MyService {

    @Autowired
    MyDao md;

    @Override
    public Contact getMyContact(Contact ct) {
        return md.getMyContact(ct);     
    }

    @Override
    public Contact setMyContact(Contact c) {
        return md.setMyContact(c);
    }

}

MyDao.java

package com.pack.dao;

import com.pack.bean.Contact;

public interface MyDao {
    Contact getMyContact(Contact c);
    Contact setMyContact(Contact c);
}

MyDaoImpl.java

package com.pack.dao;

import org.springframework.stereotype.Repository;

import com.pack.bean.Contact;

@Repository("myDao")
public class MyDaoImpl implements MyDao {

    @Override
    public Contact getMyContact(Contact ct) {

        Contact c = new Contact();
        c.setUserName(ct.getUserName());
        c.setContactNo(ct.getContactNo());
        return c;       
    }

    @Override
    public Contact setMyContact(Contact c) {
        return getMyContact(c);
    }
}

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login</title>
</head>
<body>
<form:form action="loginUser.do" method="post" commandName="login">
Login : <form:input path="loginId"/></br>
Password : <form:password path="userName"/></br>
<input type="submit" value="Login"></br>
${loginMessage}
</form:form>
</br>
</body>
</html>


登录
登录：

密码：



${loginMessage}

homeApp.jsp

<!DOCTYPE html>
<html>
    <head lang="en">
      <meta charset="utf-8">
      <title>AngularJS Routing</title>

    </head>
    <body>
      <div ng-app="mainApp" ng-controller="StudentController">
        <div ng-view></div>
      </div>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
      <script type="text/javascript">
      var mainApp = angular.module("mainApp", ['ngRoute']);

      mainApp.config(function($routeProvider) {
        $routeProvider
            .when('/home', {
                templateUrl: 'jsp/dashBoard.jsp',
                controller: 'StudentController'
            })
            .when('/viewStudents', {
                templateUrl: 'jsp/addContact.jsp',
                controller: 'StudentController'
            })
            .otherwise({
                redirectTo: '/home'
            });
      });

      mainApp.controller('StudentController', function($scope) {
        $scope.students = [
            {name: 'Mark Waugh', city:'New York'},
            {name: 'Steve Jonathan', city:'London'},
            {name: 'John Marcus', city:'Paris'}
        ];

        $scope.message = "Click on the hyper link to view the students list.";
      });     
      </script>
    </body>
</html>


AngularJS路由
var mainApp=angular.module（“mainApp”，['ngRoute']）；
mainApp.config（函数（$routeProvider）{
$routeProvider
.when（“/home”{
templateUrl:'jsp/dashBoard.jsp'，
控制器：“学生控制器”
})
.when（“/viewstusts”{
templateUrl:'jsp/addContact.jsp'，
控制器：“学生控制器”
})
.否则({
重定向到：'/home'
});
});
mainApp.controller（'StudentController'，函数（$scope）{
$scope.students=[
{姓名：'Mark Waugh'，城市：'New York'}，
{姓名：'Steve Jonathan'，城市：'London'}，
{姓名：'John Marcus'，城市：'Paris'}
];
$scope.message=“单击超链接以查看学生列表。”；
});

dashBoard.jsp

<div>
    <h2> Welcome </h2>
    <p>{{message}}</p>
    <a href="#/viewStudents"> View Students List</a>
</div>


欢迎
{{message}}

addContact.jsp

<div>
    <h2> View Students </h2>
    Search:
    <br/>
        <input type="text" ng-model="name" />
    <br/>
    <ul>
        <li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
    </ul>

    <a href="#/home"> Back</a>
</div>


查看学生
搜索：





{{student.name}，{{student.city}

我面临的问题是，我无法在保存在WEB-INF/jsp下的页面之间进行路由/

如何在SpringMVC中使用angularJS路由，我想呈现每个控制器请求附带的不同页面

请帮忙。请指导我，我将不得不在上面的代码进行更改

<div>
    <h2> Welcome </h2>
    <p>{{message}}</p>
    <a href="#/viewStudents"> View Students List</a>
</div>

<div>
    <h2> View Students </h2>
    Search:
    <br/>
        <input type="text" ng-model="name" />
    <br/>
    <ul>
        <li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
    </ul>

    <a href="#/home"> Back</a>
</div>