直接看代码和注释吧

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. 【H5开发基础】移动端1像素边框问题的解决方案

    自从乔帮主提出retina屏以来.可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了.为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了. 关于什么是移动端1像素边框问题,先上两张图 ...

  2. SKScene类

    继承自 SKEffectNode:SKNode:UIResponder:NSObject 符合 NSCoding(SKNode)NSCopying(SKNode)NSObject(NSObject) ...

  3. Node.js初体验

    1.Node.js是什么 [1]Node是一个server端 JavaScript 解释器,但是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了.总结:水深不深我还不知道, ...

  4. Mounting File Systems

    1.Mounting File Systems Just creating a partition and putting a file system on it is not enough to s ...

  5. 快速使用shortcut，适配各种ROM

    地址(徐医生的GitHub):https://github.com/xuyisheng/ShortcutHelper 常用API     /**      * 添加快捷方式      *      * ...

  6. ASP.NET-FineUI开发实践-3

    1.参照模拟数据库分页通过缓存重写内存分页,优化页面响应速度 Grid的响应速度是硬伤,我写了个通用方法把所有数据放在缓存中模拟数据库分页,比自带的缓存分页快很多,这里贴上实体类的通用方法,DataT ...

  7. Windows Native API

    http://en.wikipedia.org/wiki/Native_API Windows 的原生 API 函数通常在系统启动时(这里其他 Windows 组件还不可用).kernel32.dll ...

  8. 富文本文件CKEDITOR增加上传图片功能(.net)

    如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...

  9. Android Studio中常用设置与快捷键

    常用设置: 1.Tab不用4个空格Code Style->Java->Tabs and Indents->Use tab characterCode Style->Genera ...

  10. 结束指定Activity实例代码

    开通博客两个多月了,一直在看你们的文章 终于发觉伸手党真的很可耻.. 于是就随便写了个Demo来结束伸手党生涯~ Demo很简单:结束指定Activity... 不过也是我的一个小心意嘛.. 不要责怪 ...