参考了别人的例子,刷新是个特例。
在使用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>
分享到:
相关推荐
5. **路由**: AngularJS的`ngRoute`或`ui-router`库用于管理页面间的导航和状态。 ### 整合Spring Security与Angular JS 1. **API安全**: 对于使用Angular JS的前端,Spring Security可以通过保护RESTful API确保...
6. **路由配置**:AngularJS的$routeProvider或ui.router模块,定义了应用的路由,使用户能够在不同的视图间平滑切换。 7. **配置**:包括Spring MVC的配置文件(如`dispatcher-servlet.xml`)和AngularJS的配置...
8. **前端路由**: AngularJS的ui-router模块负责页面间的导航和路由管理,它可以与Spring MVC的URL结构保持一致,使URL更加语义化。 9. **数据模型绑定**: Spring MVC的ModelAndView或Model对象可以用来传递数据到...
- **Routes**: 使用Angular Router定义路由规则,管理页面导航。 - **Modules**: 组织应用的各个部分,提高代码可维护性。 - **Templates**: HTML模板,结合Angular指令和表达式渲染UI。 **开发流程** 1. **设置...
6. **路由**:AngularJS的`ngRoute`或`ui-router`库用于管理应用的不同视图和状态,实现页面无刷新跳转。 **SpringMVC核心知识点:** 1. **Model-View-Controller模式**:SpringMVC遵循MVC设计模式,将业务逻辑、...
4. 路由:通过ngRoute或ui-router,实现页面间的导航和状态管理。 5. 表达式:AngularJS的{{}}表达式用于在HTML中嵌入计算结果。 6. 过滤器:用于格式化数据显示,如currency、date等。 7. 模块化:通过angular....
4. **路由**:Angular Router允许用户在应用中导航,根据URL显示不同的组件。 5. **指令**:自定义HTML行为,扩展HTML的功能。 6. **服务**:提供共享状态和服务的容器,可以在应用的不同组件之间共享数据和功能。 ...
5. 路由管理:如React Router、Vue Router和Angular Router。它们分别是React、Vue和Angular的官方路由解决方案,帮助实现单页面应用的页面跳转和状态管理。 6. State管理:如Redux、Vuex和MobX。Redux是JavaScript...
- 路由管理库,如React Router或Vue Router,用于处理页面跳转和状态管理。 4. **后端技术栈** - 后端可能基于Node.js、Python的Django或Flask、Java的Spring Boot等服务器端框架。 - 数据库管理系统可能是MySQL...
- **Angular**: Google维护的全面的前端框架,提供完整的MVC架构,包括依赖注入和数据绑定等功能。 2. **状态管理**: - **Redux**: 用于JavaScript应用的状态管理库,常与React结合使用,提供可预测化的状态...
AngularJS的`ngRoute`或`ui-router`模块提供了路由功能,使得单页应用(SPA)能够根据URL导航到不同的视图。通过配置路由,我们可以定义页面间的导航逻辑,实现页面的动态加载。 ### 5. 表单处理与验证 AngularJS...
以上只是部分可能包含在"前端开源库-b.zip"中的内容,实际的库可能更具体,如专注于图表绘制的ECharts、用于路由管理的React Router或是专注于响应式设计的Bootstrap等。了解并熟练运用这些库,对于提升前端开发者的...
4. **路由**:Angular Router用于管理应用程序的不同视图,实现页面间的导航。 ### 技术栈整合 1. **Spring Boot后端API**:Spring Boot作为后端,提供RESTful API供前端Angular调用,处理业务逻辑和数据操作。 2....
同时,Spring MVC模式是进行Web开发的基础,理解和运用Spring Data JPA或MyBatis进行数据库操作也至关重要。 Angular是Google维护的前端框架,主要用于构建单页应用程序(SPA)。其关键特性包括依赖注入、双向数据...
5. **路由**:管理页面间的导航和状态,如`ngRoute`或`ui-router`。 **整合SpringMVC+REST+AngularJS** 将这三个技术结合,可以创建一个前后端分离的应用。SpringMVC作为后端,提供RESTful API供AngularJS调用,...
2. **后端框架**:后端可能使用Node.js(如Express或Koa)或Java(Spring Boot、Spring MVC)、Python(Django或Flask)等语言和框架。这些框架负责处理HTTP请求,提供API接口,并与数据库交互。 3. **数据库**:...
这些框架都有自己的生态系统,如React的Redux、Angular的Angular Router等,它们可以帮助开发者快速构建SPA。 三、后端API接口 SPA通常与后端通过RESTful API进行通信,获取或提交数据。后端可以使用各种语言实现...
前端可能使用Vue.js、React.js或Angular.js等现代JavaScript框架,结合Bootstrap或Element UI等UI库构建用户界面。 【开发过程】: 开发过程通常包括需求分析、系统设计、编码、测试和部署。在设计阶段,会制定...