UDN-企业互联网技术人气社区

板块导航

浏览  : 1468
回复  : 7

[AngularJS] 去除angularjs路由的显眼的#号

[复制链接]
泡泡兔的头像 楼主
发表于 2017-1-4 15:26:22 | 显示全部楼层 |阅读模式
  在接触到angularj并完成第一个demo后,惊奇地发现居然还可以这样开发前端界面。个人喜欢的一个功能点就是ng的路由功能,可以很好地将视图放入多个文件中。但最基础的使用会给url添加一个显眼的#,因此从网上搜索了很多看到大多的做法是开启html5模式url,示例如下:
  1. angular.module("blogApp", ['ngRoute'])
  2.             .config(function ($routeProvider, $locationProvider) {
  3.                 $routeProvider.when("/blog/home", { templateUrl: "/page/home.html" })
  4.                     .when("/blog/article", { templateUrl: "/page/article.html" })
  5.                     .when("/blog/share", { templateUrl: "/page/share.html" })
  6.                     .when("/blog/about", { templateUrl: "/page/about.html" })
  7.                     .otherwise({ redirectTo: "/blog/home" });
  8.                 $locationProvider.html5Mode(true);
  9.             });
复制代码

  并在head中添加:<base href="/">,然后就可以使用ng的路由功能了。

  但是这样有一个小问题,就是如果进行刷新,这样如果当前url非otherwise指定的地址的话,就会报404错误,这是因为服务端没有对应的页面。或者保存了一个中间的地址,下次要重新使用时也会发生同样的事,所以对于这类的现有的方案就不适用了。因为我后台是使用asp.net mvc所以对这个问题的一个解决方法如下:

  1. 首先在routeconfig中配置一条路由,把从前端过来的匹配的url都映射到Home的Index动作中,代码如下:
  1. public class RouteConfig
  2.     {
  3.         public static void RegisterRoutes(RouteCollection routes)
  4.         {
  5.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

  6.             routes.MapRoute(
  7.                 name: "BLOG",
  8.                 url: "blog/{*others}",
  9.                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
  10.             );

  11.             routes.MapRoute(
  12.                 name: "Default",
  13.                 url: "{controller}/{action}/{id}",
  14.                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
  15.             );
  16.         }
  17.     }
复制代码

  2. 根据上步,所有刷新操作都会映射到/Home/Index,这样就可以在Index方法中获取实际的请求URL,然后把URL保存到ViewBag中,以供视图中使用,代码如下:
  1. public class HomeController : Controller
  2.     {
  3.         public ActionResult Index()
  4.         {
  5.             ViewBag.Url = Request.RawUrl;
  6.             return View();
  7.         }
  8.     }
复制代码

  3. 在ng的控制器中增加currentUrl属性,并通过ViewBag将Url赋给它,然后通过$location.path($scope.currentUrl)来将视图切换到刷新时的路由上,代码如下:
  1. angular.module("blogApp", ['ngRoute'])
  2.             .config(function ($routeProvider, $locationProvider) {
  3.                 $routeProvider.when("/blog/home", { templateUrl: "/page/home.html" })
  4.                     .when("/blog/article", { templateUrl: "/page/article.html" })
  5.                     .when("/blog/share", { templateUrl: "/page/share.html" })
  6.                     .when("/blog/about", { templateUrl: "/page/about.html" })
  7.                     .otherwise({ redirectTo: "/blog/home" });
  8.                 $locationProvider.html5Mode(true);
  9.             })
  10.             .controller("blogCtrl", function ($scope, $route, $location) {
  11.                 $scope.currentUrl = '@ViewBag.Url';
  12.                 $location.path($scope.currentUrl);
  13.                 $scope.$route = $route;
  14.             });
复制代码

  以上就是我的解决方案。其他语言框架的都可以使用类似的方式来完成。

相关帖子

发表于 2017-1-4 15:26:52 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2017-1-4 15:26:52 来自手机 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-1-4 15:26:52 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

发表于 2017-1-4 15:26:52 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-1-4 15:26:53 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“骨之精灵“
使用道具 举报

回复

发表于 2017-1-4 15:26:54 | 显示全部楼层
我完全是被标题<<去除angularjs路由的显眼的#号>>吸引过来的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部