去除angularjs路由的显眼的#号
在接触到angularj并完成第一个demo后,惊奇地发现居然还可以这样开发前端界面。个人喜欢的一个功能点就是ng的路由功能,可以很好地将视图放入多个文件中。但最基础的使用会给url添加一个显眼的#,因此从网上搜索了很多看到大多的做法是开启html5模式url,示例如下:
angular.module("blogApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/blog/home", { templateUrl: "/page/home.html" })
.when("/blog/article", { templateUrl: "/page/article.html" })
.when("/blog/share", { templateUrl: "/page/share.html" })
.when("/blog/about", { templateUrl: "/page/about.html" })
.otherwise({ redirectTo: "/blog/home" });
$locationProvider.html5Mode(true);
});
并在head中添加:<base href="/">,然后就可以使用ng的路由功能了。
但是这样有一个小问题,就是如果进行刷新,这样如果当前url非otherwise指定的地址的话,就会报404错误,这是因为服务端没有对应的页面。或者保存了一个中间的地址,下次要重新使用时也会发生同样的事,所以对于这类的现有的方案就不适用了。因为我后台是使用asp.net mvc所以对这个问题的一个解决方法如下:
1. 首先在routeconfig中配置一条路由,把从前端过来的匹配的url都映射到Home的Index动作中,代码如下:
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute(
name: "BLOG",
url: "blog/{*others}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
); routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
2. 根据上步,所有刷新操作都会映射到/Home/Index,这样就可以在Index方法中获取实际的请求URL,然后把URL保存到ViewBag中,以供视图中使用,代码如下:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Url = Request.RawUrl;
return View();
}
}
3. 在ng的控制器中增加currentUrl属性,并通过ViewBag将Url赋给它,然后通过$location.path($scope.currentUrl)来将视图切换到刷新时的路由上,代码如下:
angular.module("blogApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/blog/home", { templateUrl: "/page/home.html" })
.when("/blog/article", { templateUrl: "/page/article.html" })
.when("/blog/share", { templateUrl: "/page/share.html" })
.when("/blog/about", { templateUrl: "/page/about.html" })
.otherwise({ redirectTo: "/blog/home" });
$locationProvider.html5Mode(true);
})
.controller("blogCtrl", function ($scope, $route, $location) {
$scope.currentUrl = '@ViewBag.Url';
$location.path($scope.currentUrl);
$scope.$route = $route;
});
以上就是我的解决方案。其他语言框架的都可以使用类似的方式来完成。
去除angularjs路由的显眼的#号的更多相关文章
- AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...
- 【转】AngularJS路由和模板
1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...
- AngularJS路由和模板
前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...
- AngularJS 路由精分
AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...
- [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...
- AngularJS 路由和模板实例及路由地址简化方法
最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽 ...
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- AngularJS路由跳转
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...
- AngularJS进阶(二)AngularJS路由问题解决
AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...
随机推荐
- React(JSX语法)----动态UI
1.React honws how to bubble and capture events according to the spec,and events passed to your event ...
- AndroidStudio 点9图片文件报错
如果项目中不仅9图报错,包含的资源还有一堆不合法PNG,那怎么办???这种情况下,正确的解决办法是找到build.gradle文件,在buildToolsVersion下面加入以下两句: aaptOp ...
- 如何用SQL语句实现Mysql数据库的备份与还原
以前一直做android客户端的项目,根本没有开发asp.net mvc的开发,现阶段做了一个模块,参数设置,以及数据库的备份与还原.其需求如下: 参数设置 本项参数设置为对自动数据备份进行设置,管理 ...
- warning 4510 with const member in struct
I write a code section as this struct My{const int a;}; OK, then set the warning level then I will g ...
- 移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】
移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26 15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...
- java 自动登录代码
javaBean的代码 package bean; import java.io.Serializable; public class Admin implements Serial ...
- Oracle几个基础配置问题:ORA-12154: TNS: 无法解析指定的连接标识符、ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务、ORA-12516 TNS监听程序找不到符合协议堆栈要求的可用处理程序
问题1:ORA-12154: TNS: 无法解析指定的连接标识符 在一台服务器上部署了Oracle客户端,使用IP/SID的方式访问,老是报ORA-12154错误,而使用tnsnames访问却没有问题 ...
- logging mod
http://blog.csdn.net/freeking101/article/details/52448580
- eclipse svn插件地址
http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240
- AspNetPager控件报错误: Syntax error, unrecognized expression: input#ctl00$ContentPlaceHolder1$Aspnetpager1_input问题解决[摘]
高版本IE,如IE10或者IE11在浏览页面时出现错误: Syntax error, unrecognized expression: input#ctl00$ContentPlaceHolder1$ ...