直接看代码和注释吧

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. 如何编写一个JSON解析器

    编写一个JSON解析器实际上就是一个函数,它的输入是一个表示JSON的字符串,输出是结构化的对应到语言本身的数据结构. 和XML相比,JSON本身结构非常简单,并且仅有几种数据类型,以Java为例,对 ...

  2. WKWebview点击图片查看大图

    大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...

  3. Android 自定义View (四) 视频音量调控

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24529807 今天没事逛eoe,看见有人求助要做一个下面的效果,我看下面一哥们说 ...

  4. Java基础知识强化22：Java中数据类型转换

    数据类型转换: (1). 自动转换 低级变量可以直接转换为高级变量,这叫自动类型转换.比如: byte b: int b:  long b:  float b:   double  b: 上面的语句可 ...

  5. MM32/STM32中断和事件梳理

    Interrupt_event梳理 预备资料 MM32/stm32中文参考手册 Cortex-M3权威指南(深入了解中断和异常) MM32F103产品手册(配置GPIO的复用功能可能用到) 提出问题 ...

  6. css 实现文字过长变成省略号（包含单行的and多行的）

    单行的比较简单  但是必须条件同时满足 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: ...

  7. spring aop例子

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

  8. SqlServer数据库设计，纠结的问题，有胆你就来!

    最近,小菜遇到了数据库设计上的一个问题,希望各位大侠再次,直抒己见,帮忙分析一下.也可有更好的设计,请直接提出来. 要求:数据库(SQL Server 2005)存储每个学生,单个客观题答案.分数,主 ...

  9. WinAPI——模拟正弦波

    /*************************** * * 程序名称 : 模拟正弦波 * 作 者 : doodle777 * 版 本 : 1.1 * 日 期 : 2012-10-19 * 说 明 ...

  10. java JNI 的实现(1)-又进一步加深对JVM实现的理解

    目录 概述 主要优点 主要缺点 JNI实现的简单例子 开发工具 简略步骤 1,在eclipse的 'java类' 中声明一个 'native方法'; 2,使用 'javah' 命令生成包含'nativ ...