直接看代码和注释吧

ASP.NET MVC router

public class RouteConfig

{

    public static void RegisterRoutes(RouteCollection routes)

    {

        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.IgnoreRoute("favicon.ico");

        routes.MapMvcAttributeRoutes();  //一定要在 routes.MapRoute 之前注册

        //单页面的处理

        routes.MapRoute(

            name: "PersonalProfile",

            url: "personal-profile/{*pathInfo}", //这样写可以把所有under personal-profile 的路径连到同一个控制器

            defaults: new { controller = "PersonalProfile", action = "Index", pathInfo = "pathInfo" }

        );

        //一般的处理

        routes.MapRoute(

            name: "Default",

            url: "{controller}/{action}/{id}",

            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

        );

    }

}

ASP.NET Controller

//[RoutePrefix("personal-profile")]

public class PersonalProfileController : Controller

{

    //[Route("")]

    public ActionResult Index(string pathInfo)

    {

        //pathInfo 我们还可以另作处理

        return View();

    }

}

这里可以注意一点，如果使用了 AttributeRoute , routeMap 就不灵了，

cshtml Angular

@{

    Layout = null;

}

<!DOCTYPE html>

<html ng-app="app" ng-controller="ctrl">

<head>

    <base href="http://localhost:58404/personal-profile/" />

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    personal profile

    <script src="~/js/jquery.js"></script>

    <script src="~/js/angular.js"></script>

    <script>

        function redirectBaseUrlWithoutSlash() {

            //refer : https://github.com/angular/angular.js/issues/14018

            if (location.pathname.charAt(location.pathname.length - 1) != "/") {

                var oldHref = location.href;

                var newHref = location.protocol + "//" + location.host + location.pathname + "/" + location.search + location.hash;

                console.log(oldHref);

                console.log(newHref)

                location.href = newHref;

            }

        }

        redirectBaseUrlWithoutSlash(); //处理没有url来的时候不是end with /

        var app = angular.module("app", []);

        app.config(["$locationProvider", function ($locationProvider) {

            //note :

            //因为 angular 在做 $location 和 <base> 的时候会对比游览器的url

            //而且是有区分大小写的，所以很容易error

            //reset之后就不会有这个问题了.

            //做法是拿游览器的url replace 进 base href

            var wholeUrl = location.href;

            var baseElem = document.getElementsByTagName("base")[0];

            var baseUrl = baseElem.href;

            var newBaseUrl = wholeUrl.substring(0, baseUrl.length);

            baseElem.href = newBaseUrl;

            $locationProvider.html5Mode({

                enabled: true,

                requireBase: true

            });

        }]);

        app.controller("ctrl", ["$location", function ($location) {

            console.log("start");

        }]);

    </script>

</body>

</html>

注意 angular 和 base 的冲突

MVC route 和 Angular router 单页面的一些方式的更多相关文章

  1. 使用Angular构建单页面应用(SPA)

    什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ...

  2. router单页面多个标签tags的用法<router-view></router-view>

    <keep-alive><router-view :key="path" /></keep-alive>

  3. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  4. 基于angularJs的单页面应用seo优化及可抓取方案原理分析

    公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...

  5. Nginx 解决WebApi跨域二次请求以及Vue单页面问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...

  6. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  7. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  8. AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  9. H5单页面架构：requirejs + angular + angular-route

    说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...

随机推荐

  1. ubunt 基于deb 配置本地apt 源 分成仅本机使用,局域网使用2种

    dpkg-scanpackages /software /dev/null | gzip>/software/Packages.gz

  2. 注释PHP和html混合代码

    <?php if(false){ ?> any code <?php } ?>

  3. 查询表达式Linq

    LINQ简介 OO(面向对象)以外的疆域:信息的访问与整合.关系数据库与XML为其中的典型应用. .net Language Integrated Query(Linq):不采用特定关于数据库与XML ...

  4. Android ExpandableListView BaseExpandableListAdapter (类似QQ分组列表）

    分组列表视图(ExpandableListView) 和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListA ...

  5. 初学者学Java（十五）

    再谈数组 在这一篇中我们来讲一下关于数组的排序和查找的方法. 排序 说到数组的排序,就不得不说冒泡这种经典的方法. 1.冒泡排序 冒泡排序的基本思想是比较两个相邻元素的值,如果满足条件就交换元素的值( ...

  6. iPhone手机GPS地图位置好帮手

    十一国庆黄金周近在眉睫,我先祝大家过一个愉快开心的国庆长假. 假期内,难免老友聚会吃饭聊天联络感情,年轻朋友相亲约会,一家人出门旅游.平时,我们聚会时,总有要来的人找不到聚会地点,需要反复打电话确认: ...

  7. [Angular 2] Handling Clicks and Intervals Together with Merge

    Observable.merge allows you take two different source streams and use either one of them to make cha ...

  8. yii cgridview 对生成的数据进行分页

    这个其实最简单 在对应的model里找Search方法 找到后,参见如下代码 public function search() { // @todo Please modify the followi ...

  9. java沙箱机制原理

    参考文档如下: http://www.2cto.com/kf/201012/79578.html

  10. spring aop例子

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAAFWCAIAAACD6E2aAAAgAElEQVR4nO2df1gTV77/55/93z/2ee