直接看代码和注释吧

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. Android Studio 遇见的第一个Error

    最近在国内多次尝试在Eclipse下更新SDK无果后,最后终于通过FQ后结束了Google服务器无法访问的噩梦. 顺着墙外的梯子,一并下载Google的Android Studio尝鲜,安装成功后,就 ...

  2. ip地址中的网络号，主机号

    当前使用的IP地址有4个字节(32bit)组成,即IPV4编码方式.每个IP地址包括两部分:网络号和主机号.当分配给主机号的二进制位越多,则能标识的主机数就越多,相应地能标识的网络数就越少,反之同理. ...

  3. Jquery的hover方法让鼠标经过li时背景变色

    来源地址:http://itfish.net/article/29790.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  4. [ES6] Object.assign (with defaults value object)

    function spinner(target, options = {}){ let defaults = { message: "Please wait", spinningS ...

  5. oracle中split的使用

    1.创建自己的类型 VARCHAR2ARRAY CREATE OR REPLACE TYPE "VARCHAR2ARRAY" as table of varchar2(300); ...

  6. 一些Android程序的反逆向方法

    1.检测调试器 在代码中检测调试器的动态调试 首先在AndroidMainfest.xml文件中设置android:debuggable="false",让程序不可调试.这样别人想 ...

  7. Creating a Swap Partition

    Creating a Swap Partition 1.   Use  fdisk /dev/vda  to open your disk in fdisk. (Use gdisk if you ar ...

  8. 用户 'IIS APPPOOL\ExportExcel' 登录失败。

    解决了前两个错误,在成功打开项目后,在访问数据库又越到如下错误 “/”应用程序中的服务器错误. 用户 'IIS APPPOOL\ExportExcel' 登录失败. 说明: 执行当前 Web 请求期间 ...

  9. 排序算法之快速排序 JAVA快速排序算法

    public static void quickSort(int[] arr, int low , int height){ int l=low, h = height; if(low < he ...

  10. C#判断程序是否以管理员身份运行，否则以管理员身份重新打开

    /// <summary> /// 判断程序是否是以管理员身份运行. /// </summary> public static bool IsRunAsAdmin() { Wi ...