直接看代码和注释吧

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. maven下载jta失败，自己本地安装jta库

    mvn install:install-file -Dfile=./jta-1_0_1B-classes.zip -DgroupId=javax.transaction -DartifactId=jt ...

  2. spring3.1的BeanFactory与Quartz1.8整合

    spring的applicationContext.xml配置文件: 加入 <bean id="myJob" class="org.springframework. ...

  3. python 2017.1.9

    python对缩进和空格要求非常严格,要求非常对齐 print时不同字符串之间会自动加上空格 while 和 if 等没有结束标记,全部通过对齐的方式表示的

  4. [Angular 2] ngrx/store

    @ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...

  5. 开源消息中间件DotNetMQ

    由于这个开源项目对我这种中间件菜鸟很有帮助,因此,我将官方的说明文档翻译如下: Introduction In this article, I will introduce a new and ind ...

  6. Activity启动机制

    以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luosheng ...

  7. python基础-软件目录开发规范

    为什么要设计好目录结构? "设计项目目录结构",就和"代码编码风格"一样,属于个人风格问题.对于这种风格上的规范,一直都存在两种态度: 一类同学认为,这种个人风 ...

  8. 95秀-dialog 进度对话框 实用工具

    工具Util public class DialogUtil {     public static ProgressDialogView progressDialog;     /**      * ...

  9. 使程序能够引入.json文件， 为网站添加 MIME 映射

    确认启用了 MIME 映射,或使用命令行工具 appcmd.exe 为网站添加 MIME 映射. 若要设置 MIME 类型,请在 IIS Express 安装目录中运行以下命令: appcmd set ...

  10. java中Class.forName与new

    一.使用Class.forName 1.装载类 Class clazz = Class.forName("xx.xx.xx"); 2.初始化对象 clazz.newInstance ...