Angular1.6 UI-Router不能与index.jsp一起使用

时间:2018-04-05 19:39:50

标签: java angularjs jsp spring-mvc

我是Angular.js的新手,我正在尝试运行一个示例Angular1.6,spring3.1.1 MVC项目。我正在使用ui-router从index.jsp.All js路由login.html和jsp文件在服务器启动时可用,但我仍然无法从index.jsp转到login.html。

的index.jsp

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <html ng-app="CM">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </meta>
    <title>Expanded Navigation | Nifty - Responsive admin template.</title>
     <link href="<c:url value='/static/css/bootstrap.min.css'/>" rel="stylesheet">

     <link href="<c:url value='/static/css/jquery-ui.min.css'/>" rel="stylesheet">
     <script src="<c:url value='/static/js/jquery.js'/>" type="text/javascript"> 
    </script>
    <script src="<c:url value='/static/js/angular.min.js'/>" 
    type="text/javascript"> </script>
    <script src="<c:url value='/static/js/angular-ui-router.min.js'/>" type="text/javascript"> </script>
    <script src="<c:url value='/static/config/config.js'/>" type="text/javascript"> </script>
    <script src="<c:url value='/static/controller/loginCtrl.js'/>" type="text/javascript"> </script>

    </head>
    <body>
    <div class="container" width="100px">
      <h2>AngularJS Simple Login Example</h2>
    <ui-view>
        <i>Loding....</i>
    </ui-view>

    </div>
    </body>
    </html>

config.js

var app = angular.module('CM', ['ui.router']);
    app.config(['$stateProvider', function($stateProviders) {

        $stateProvider
             .state('login', {
                url : '/',
                templateUrl : '/static/pages/login.html',
                controller : 'loginCtrl'
             });
    }]);
    console.log("Homepage Config loaded..");
app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

loginCtrl.js

 var app = angular.module('CM');
 app.controller('loginCtrl', function($scope, $rootScope) {
 $rootScope.title = "AngularJS Login Sample";
 console.log("LoginCtrl Loded");
 });

的login.html

<div id='content' ng-controller='loginCtrl'>
    <div class="container">
        <form class="form-signin" role="form" ng-submit="login()">
            <h3 class="form-signin-heading">Login Form</h3>
            <span><b>Username :</b>&nbsp;
            <input type="username" class="form-control" ng-model="user.name" required> </span> </br>
            </br> <span><b>Password :</b>&nbsp;&nbsp;
            <input type="password" class="form-control" ng-model="user.password" required> </span>
            <br><br>
            <button class="btn btn-lg btn-primary btn-block" type="submit">
                <b>Sign in</b>
            </button>
        </form>
    </div>
    <!-- /container -->
</div>

LoginController.java

@Controller
public class LoginController {

    @RequestMapping(value = "/", method = RequestMethod.POST)
    public void login(HttpServletRequest request, HttpServletResponse response,
                      @RequestParam("userName") String userName, @RequestParam("password") String password) throws IOException {
        Object[] customerName = null;
        System.out.println("logged in " + userName + "password " + password);
        ModelAndView mod = new ModelAndView();

        mod.setViewName("/campignDisplay");
    }
}

的web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:javaee="http://java.sun.com/xml/ns/javaee"
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" id="WebApp_9" version="2.4">

        <display-name>campaignManager</display-name>
     <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/dispatcher-servlet.xml</param-value>
    </context-param>
        <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
        </servlet-mapping>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
</web-app>

调度-servlet.xml中

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:context="http://www.springframework.org/schema/context"
        xmlns:mvc="http://www.springframework.org/schema/mvc"
        xmlns:task="http://www.springframework.org/schema/task"
        xmlns:cache="http://www.springframework.org/schema/cache"
        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
           http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd
           http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">

        <context:component-scan base-package="com.hp.cms.*"/>
        <mvc:resources mapping="/static/**" location="/static/" />
        <bean
            class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="prefix">
                <value>/WEB-INF</value>
            </property>
            <property name="suffix">
                <value>*.jsp</value>
            </property>
        </bean>    
    </beans>

真的感谢任何帮助!!

2 个答案:

答案 0 :(得分:0)

您忘了在您的html页面中添加ng-app attr

这样做

<body ng-app="CM">

为了更好的方法,更好地使用扩展方法而不是用变量包装它。

config.js

angular.module('CM', ['ui.router']);
    angular.module('CM').config(['$stateProvider', function($stateProvider) {

        $stateProvider
             .state('login', {
                url : '/',
                templateUrl : '/static/pages/login.html',
                controller : 'loginCtrl'
             });
    }]);
    console.log("Homepage Config loaded..");
angular.module('CM').config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

loginCtrl.js

 angular.module('CM').controller('loginCtrl', function($scope, $rootScope) {
 $rootScope.title = "AngularJS Login Sample";
 console.log("LoginCtrl Loded");

答案 1 :(得分:0)

发布解决方案,如果它帮助别人。有角度和ui-router的版本问题。我已将Angular的版本从1.6降级到1.2并且ui-router是 0.2.18。 由于时间限制,没有花太多时间来解决问题。