带有ASP.Net MVC RouteConfig的AngularJS Ui-Router。它是如何工作的？

一尘不染

带有ASP.Net MVC RouteConfig的AngularJS Ui-Router。它是如何工作的？

angularjs

我正在阅读本文，但我仍然无法理解Angular的UI Router如何与ASP.Net路由一起使用。

有人可以简单明了地说明从手动在浏览器中键入URL的整个生命周期（例如：http：// myapp /
stateOne）。谁处理请求，ASP.Net？如果不是，那么在ASP进入页面之前，Angular如何拦截URL请求？AngularJS何时随状态提供程序一起提供？

我对此很困惑，在这个想法上找不到很多。

除了这个问题，我还有其他一些我无法理解的事情。我正在写一个应用程序，其中：

主页/Index.cshtml->登陆页面根据状态提供内容（例如，它具有ui-view =“ content”，该页面应依次在其中提供Categories / Index.cshtml）。那么，我将如何设置“默认状态”，以便导航到索引将加载主页和具有默认类别的ng-view内容？
Login / Index.cshtml->一种模态表单，我使用modal.show（）和modal.hide（）隐藏和显示。从用户界面视图投放。可以了但是，如果用户键入http：// myapp / login，该怎么办？我可以以某种方式拦截请求并显示带有打开模式形式的索引页吗？甚至更好的是，当前页面并打开模态表单？（即：是否可以在没有templateURL的情况下设置状态）？
如果我的页面中有多个列表怎么办？我曾经见过人们将状态设置为state.childState，但是如果我需要一次加载多个列表（因此需要加载多个状态->视图）怎么办？

编辑：特别注意这一部分，routeTwo/6如果我理解正确的话，它会使用黑魔法来导致在UI-View中加载带有routeTwo页面的索引页面。

HTML5模式有效，但仅是非常肤浅的方式。页面的刷新正在将完整的URL发送到服务器（因为我们已经删除了苏格兰威士忌），这不知道该怎么做。我们可以通过适当地重新配置MVC的RouteCollection来解决此问题。我们需要明确说明每个视图的路由，然后添加一个包罗万象的功能，将所有其他URL发送到我们的登录页面，由Angular处理。

像这样更新App_Start => RouteConfig.cs中的RegisterRoutes方法：

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "routeOne",
        url: "routesDemo/One",
        defaults: new { controller = "RoutesDemo", action = "One" });

    routes.MapRoute(
        name: "routeTwo",
        url: "routesDemo/Two/{donuts}",
        defaults: new { controller = "RoutesDemo", action = "Two", donuts = UrlParameter.Optional });

    routes.MapRoute(
        name: "routeThree",
        url: "routesDemo/Three",
        defaults: new { controller = "RoutesDemo", action = "Three" });

    routes.MapRoute(
        name: "login",
        url: "Account/Login",
        defaults: new { controller = "Account", action = "Login" });

    routes.MapRoute(
        name: "register",
        url: "Account/Register",
        defaults: new { controller = "Account", action = "Register" });

    routes.MapRoute(
        name: "Default",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" });
}

阅读 145

2020-07-04

共1个答案

一尘不染

快乐路径生命周期

由于从URL请求内容时客户端尚未加载任何资源，因此向服务器发出了请求。ASP.NET路由接收请求并返回绑定到该路由的任何内容。
如果返回索引（包含AngularJS App的入口，则从服务器加载HTML内容和后续资源。
AngularJS在收到DOM ready事件后运行
AngularJS解析DOM并开始执行它遇到的各种组件。

客户端路由

加载应用程序后，客户端路由模块（例如ui-router
ngRoute或新组件路由器）将为您控制路由并加载绑定到该路由的内容。但是，仅当您始终保持用于引导Angular应用程序的预定义根路由时，此方法才能正常工作。

IE浏览器www.site.com/Home#/login或www.site.com/Home!/login使用$locationProvider.hashPrefix('!').html5Mode(true);。

完全重新加载您的根URL将加载您的主要索引内容，重新初始化angular应用程序并选择相应的客户端路由（在这种情况下，将是登录路由和与该路由关联的模块）。但是，一旦偏离了这一点，就会遇到不愉快的道路问题。

不快乐的道路

如果您请求的URL不将入口点返回到AngularJS应用程序，则Angular无法拦截该请求，因此将永远不会运行。因此，如果要向不是Angular应用程序入口的URL发出请求，则必须决定如何处理它。一种常见的方法是重定向到索引。

其他问题

Home / Index.cshtml-由于您要混合两个世界，因此建议您在加载后允许Angular控制和驱动所有导航。这将包括调用部分路由并加载剃刀视图，就像它们是模板一样（如果您想继续使用Razor）。
Login / Index.cshtml-这确实很棘手。一种选择是检测他们是否正在从Ajax调用此路由。如果是，请允许该请求。如果不是，请重定向回索引，因为他们正在执行整个页面加载。另一种选择是提供整个网址，但是您需要确保还提供了角度应用程序入口点。然后，您可以在加载角度应用程序以加载主页内容之后进行一些魔术操作，然后再弹出模式。但是，一旦遇到其他类似情况，这种情况很快就会变得混乱。
如果我的页面中有多个列表怎么办？-您会一次显示多个列表吗？如果是这样，那很好，因为您实际上可以加载父状态/模板/控制器，然后再包含其他子模板/控制器，而无需更改父状态。但是，这个问题非常广泛和复杂，确实需要单独解决。

这可能看起来像什么

您可能想声明一条处理默认入口点的路线：

public static void RegisterRoutes(RouteCollection routes)
{
    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "LoadMain", id = UrlParameter.Optional }
    );
}

public class HomeController : Controller
{
    public ActionResult LoadMain()
    {
        return View("Main.cshtml");
    }
}

public class CategoriesController : Controller
{
    public ActionResult Index()
    {
        return PartialView("Index.cshtml");
    }
}

这样，如果用户点击www.site.com，我们将从/ Home /
LoadMain返回内容。该内容将包括我们所有必需的Angular引用（Angular，UI-
Router，我们的主应用程序等），这将使我们能够将客户端路由默认设置为/ home并随后加载/ Home / Index

Main.cshtml：

<head>
    <script src="//angular.js"></script>
    <script src="//angular-ui-router.min.js"></script>
    <script src="app.js"></script>
<body ng-app="app">
    <div ui-view></div>
</body>

app.js

var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/Categories/Index' // corresponds to an MVC partial route
        })
        .state('login', {
            url: '/login',
            templateUrl: '/Login/Index' // corresponds to an MVC partial route
        })
    });

2020-07-04