MVC route 和 Angular router 单页面的一些方式

直接看代码和注释吧

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>
        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 的冲突

时间: 2024-10-13 20:51:58

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

router单页面多个标签tags的用法&lt;router-view&gt;&lt;/router-view&gt;

<keep-alive><router-view :key="path" /></keep-alive> 原文地址:https://www.cnblogs.com/weibanggang/p/11717093.html

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

公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践资料分享出来的也比较少,略懵,前后花了一番功夫总算完成了.在这里记录下来,做一个总结,也希望能够帮助在做类似工作的朋友少走一点弯路.还是建议需要seo的网站技术选型尽量不要使用angular react一类的单页面框架.如果你和我一样网站做完了发现需要seo,那么往下看吧.如果各位已有更优的方案欢迎

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

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

requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无

H5单页面架构:requirejs + angular + angular-route

说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的模块化,模块间低耦合高内聚,目的就为了团队合作效率: 可扩展性.这个不用说了. 学习成本.一个框架再好,团队新成员难以掌握,学习难度大,结果很容易造成代码混乱. 而根据实际经验来看,方便是必然首要地位,除此之外,应该是代码管理了.团队合作过程中,各种协作,代码冲突等等,都会给一个优秀框架带来各种奇怪

ABP示例程序-使用AngularJs,ASP.NET MVC,Web API和EntityFramework创建N层的单页面Web应用

本片文章翻译自ABP在CodeProject上的一个简单示例程序,网站上的程序是用ABP之前的版本创建的,模板创建界面及工程文档有所改变,本文基于最新的模板创建.通过这个简单的示例可以对ABP有个更深入的了解,每个工程里应该写什么样的代码,代码如何组织以及ABP是如何在工程中发挥作用的. 源文档地址:https://www.codeproject.com/Articles/791740/Using-AngularJs-ASP-NET-MVC-Web-API-and-EntityFram 源码可以

spa单页面应用(angular)

本篇文章是对单页面的一个简单的基本逻辑操作,这个方法可以搭建基本的单页面的逻辑结构. 简单理解:单页面应用,锚点值切换,一个路由对应一个页面. 路由:此时会创建一个信息保存路由的信息,之后对页面a标签进行操作,会进入路由表中查找与之匹配的路由信息. ----html <div> <a href='#/news'>跳转到news</a> <a href='#/share'>跳转到share</a> <router-view></r

【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)

练习2:创建SPA界面 在本练习中,你将首先创建Geek Quiz的web前端,使用AngularJS专注于单页面应用程序的交互.然后你将使用CSS3来执行丰富的动画和提供一个当从一个问题转换到另一个问题时切换上下文的可视化效果以加强用户体验. 任务1:使用AngularJS来创建SPA界面 在本任务中,你将使用AngularJS来实现Geek Quiz应用程序的客户端.AngularJS是一个开源的JavaScript框架,它能够搭配MVC以加强基于浏览器的应用程序,使其对于开发和测试都更加便

Angular——单页面与路由的使用

单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个"原生"应用. 在PC端也有广泛的应用,通常情况下使用Ajax异步请求数据,然后实现内容局部刷新,局部刷新的本质是动态生成DOM,新生成的DOM元素并没有真实存在于文档中,所以当再次刷新页面时新添加的DOM元素会"丢失",