`

angular js spring mvc ui-router 路由冲突

 
阅读更多
参考了别人的例子,刷新是个特例。

在使用angular ui router 以后,界面浏览器会重定向,当使用F5刷新之后,界面没有走angualr的路由,而是请求服务器,所以服务器后台 web.xml 配置url mapping , 以/ang/*请求的就
跳转到默认界面。

$urlRouterProvider.otherwise('home');
    $stateProvider
        .state("home", {
            url:"/ang/home",
            templateUrl: "index.html"
        })
        .state("login", {
            url:"/ang/login",
            templateUrl: "views/login.html"
        })

<servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/spring/springMVC.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>*.action</url-pattern>
  </servlet-mapping>
 
 
   <!-- 当用户输入刷新空界面的时候跳转到默认界面(F5刷新 浏览器定向请求服务器) -->
  <servlet>
    <servlet-name>angularRedirect</servlet-name>
    <servlet-class>com.hr.angular.AngularRedirect</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>angularRedirect</servlet-name>
    <url-pattern>/ang/*</url-pattern>
  </servlet-mapping>

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String requestUrl = req.getRequestURI();
log.info("angular 后台重新进入首页 请求: " +requestUrl);
resp.sendRedirect("/hrmis/Main.html");
}


<nav class="navbar navbar-inverse" role="navigation">
    <div ng-controller="loginCtrl" >
        <ul class="nav navbar-nav">
            <li ui-sref ="home"  class="active" ><a href="">首页</a></li>
            <li ui-sref = "login"   ><a href=""><span>登陆</span> <span></span></a></li>
            <li  ui-sref = "register" ><a href="">注册</a></li>
            <li  ui-sref = "loginOut" ><a href="">退出</a></li>
        </ul>
    </div>
</nav>

<div class="container">
   <div ui-view=""></div>
</div>
分享到:
评论

相关推荐

    tut-spring-security-and-angular-js:Spring Security 和 Angular JS

    5. **路由**: AngularJS的`ngRoute`或`ui-router`库用于管理页面间的导航和状态。 ### 整合Spring Security与Angular JS 1. **API安全**: 对于使用Angular JS的前端,Spring Security可以通过保护RESTful API确保...

    Springmvc和Angularjs交互代码Demo

    6. **路由配置**:AngularJS的$routeProvider或ui.router模块,定义了应用的路由,使用户能够在不同的视图间平滑切换。 7. **配置**:包括Spring MVC的配置文件(如`dispatcher-servlet.xml`)和AngularJS的配置...

    angular-springmvc

    8. **前端路由**: AngularJS的ui-router模块负责页面间的导航和路由管理,它可以与Spring MVC的URL结构保持一致,使URL更加语义化。 9. **数据模型绑定**: Spring MVC的ModelAndView或Model对象可以用来传递数据到...

    redditclone实践:遵循Spring Boot和Angular教程-通过freeCodeCampprogrammingtechie构建Reddit克隆(编码项目)

    - **Routes**: 使用Angular Router定义路由规则,管理页面导航。 - **Modules**: 组织应用的各个部分,提高代码可维护性。 - **Templates**: HTML模板,结合Angular指令和表达式渲染UI。 **开发流程** 1. **设置...

    AngularJS+SpringMVC小项目

    6. **路由**:AngularJS的`ngRoute`或`ui-router`库用于管理应用的不同视图和状态,实现页面无刷新跳转。 **SpringMVC核心知识点:** 1. **Model-View-Controller模式**:SpringMVC遵循MVC设计模式,将业务逻辑、...

    100_MelonConference:Angular JS,Java,Google App Engine

    4. 路由:通过ngRoute或ui-router,实现页面间的导航和状态管理。 5. 表达式:AngularJS的{{}}表达式用于在HTML中嵌入计算结果。 6. 过滤器:用于格式化数据显示,如currency、date等。 7. 模块化:通过angular....

    Angular SpringMVC Demo

    4. **路由**:Angular Router允许用户在应用中导航,根据URL显示不同的组件。 5. **指令**:自定义HTML行为,扩展HTML的功能。 6. **服务**:提供共享状态和服务的容器,可以在应用的不同组件之间共享数据和功能。 ...

    整理我平时关注的前端库。.zip

    5. 路由管理:如React Router、Vue Router和Angular Router。它们分别是React、Vue和Angular的官方路由解决方案,帮助实现单页面应用的页面跳转和状态管理。 6. State管理:如Redux、Vuex和MobX。Redux是JavaScript...

    CodeDaily-源码.rar

    - 路由管理库,如React Router或Vue Router,用于处理页面跳转和状态管理。 4. **后端技术栈** - 后端可能基于Node.js、Python的Django或Flask、Java的Spring Boot等服务器端框架。 - 数据库管理系统可能是MySQL...

    前端开源库-orga.zip

    - **Angular**: Google维护的全面的前端框架,提供完整的MVC架构,包括依赖注入和数据绑定等功能。 2. **状态管理**: - **Redux**: 用于JavaScript应用的状态管理库,常与React结合使用,提供可预测化的状态...

    quickstarts-angular:出于教育目的收集 Angularjs 应用程序上下文中的最佳实践和特定解决方案

    AngularJS的`ngRoute`或`ui-router`模块提供了路由功能,使得单页应用(SPA)能够根据URL导航到不同的视图。通过配置路由,我们可以定义页面间的导航逻辑,实现页面的动态加载。 ### 5. 表单处理与验证 AngularJS...

    前端开源库-b.zip

    以上只是部分可能包含在"前端开源库-b.zip"中的内容,实际的库可能更具体,如专注于图表绘制的ECharts、用于路由管理的React Router或是专注于响应式设计的Bootstrap等。了解并熟练运用这些库,对于提升前端开发者的...

    springular:具有登录,用户管理,安全性等的基础项目Spring Rest

    4. **路由**:Angular Router用于管理应用程序的不同视图,实现页面间的导航。 ### 技术栈整合 1. **Spring Boot后端API**:Spring Boot作为后端,提供RESTful API供前端Angular调用,处理业务逻辑和数据操作。 2....

    框架及Jquery面试题集

    同时,Spring MVC模式是进行Web开发的基础,理解和运用Spring Data JPA或MyBatis进行数据库操作也至关重要。 Angular是Google维护的前端框架,主要用于构建单页应用程序(SPA)。其关键特性包括依赖注入、双向数据...

    SpringMVC+REST+AngularJS框架

    5. **路由**:管理页面间的导航和状态,如`ngRoute`或`ui-router`。 **整合SpringMVC+REST+AngularJS** 将这三个技术结合,可以创建一个前后端分离的应用。SpringMVC作为后端,提供RESTful API供AngularJS调用,...

    ok-admin-master

    2. **后端框架**:后端可能使用Node.js(如Express或Koa)或Java(Spring Boot、Spring MVC)、Python(Django或Flask)等语言和框架。这些框架负责处理HTTP请求,提供API接口,并与数据库交互。 3. **数据库**:...

    单页Web应用:JavaScript前端到后端 源代码

    这些框架都有自己的生态系统,如React的Redux、Angular的Angular Router等,它们可以帮助开发者快速构建SPA。 三、后端API接口 SPA通常与后端通过RESTful API进行通信,获取或提交数据。后端可以使用各种语言实现...

    管理系统系列--通用的java后台管理系统(权限管理+用户管理+菜单管理).zip

    前端可能使用Vue.js、React.js或Angular.js等现代JavaScript框架,结合Bootstrap或Element UI等UI库构建用户界面。 【开发过程】: 开发过程通常包括需求分析、系统设计、编码、测试和部署。在设计阶段,会制定...

Global site tag (gtag.js) - Google Analytics