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

Question

我正在阅读 this article我仍然无法理解 Angular 的 UI 路由器如何与 ASP.Net 路由一起工作。

谁能用简单明了的方式解释从手动将 URL 输入浏览器(例如:http://myapp/stateOne)开始的完整生命周期。谁处理请求，ASP.Net？如果不是，如果页面在 ASP 介入之前由 ASP 提供服务，angular 如何拦截 URL 请求？ AngularJS 何时与状态提供者一起出现？

我对此很困惑，找不到太多关于这个想法的信息。

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

• Home/Index.cshtml -> 着陆页根据状态提供内容(例如:它有一个 ui-view="content"，它应该反过来在其中提供 Categories/Index.cshtml)。那么，我将如何设置“默认状态”以便导航到索引时加载主页和其中包含默认类别的 ng-view 内容？
• Login/Index.cshtml -> 我使用 modal.show() 和 modal.hide() 隐藏和显示的模态形式。从 ui View 提供服务。这是工作。但是，如果用户键入 http://myapp/login我应该怎么办？我能以某种方式拦截请求并在其中显示带有开放模式表单的索引页面吗？或者更好的是，当前页面只是打开模态表单？ (即:是否可以在没有 templateURL 的情况下设置状态)？
• 如果我有一个包含多个列表的页面怎么办？例如，我见过人们将状态设置为 state.childState，但是如果我需要一次加载多个列表(因此需要加载多个状态-> View )怎么办？

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

HTML5 mode is working, but only in a very superficial way. A refresh of the page is sending the full URL to the server (as we have removed the scotch) which doesn't know what to do. We can fix this by reconfiguring MVC's RouteCollection properly. We need to be explicit about the route for each of our views, and then add a catch-all which sends all other URL's to our landing page, to be handled by Angular.

Update the RegisterRoutes method inside App_Start => RouteConfig.cs like so:

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" });
}

Answer 1

快乐之路生命周期

1. 向服务器发出请求，因为客户端在从 URL 请求内容时尚未加载任何资源。 ASP.NET 路由选择请求并返回绑定(bind)到该路由的任何内容。
2. 如果返回索引(包含 AngularJS 应用程序的入口点，则从服务器加载 HTML 内容和后续资源。
3. AngularJS 在接收到 DOM 就绪事件后运行
4. AngularJS 解析 DOM 并开始执行它遇到的各种组件。

客户端路由

加载应用程序后，ui-router ngRoute 或新组件路由器等客户端路由模块将为您控制路由并加载绑定(bind)到该路由的内容。但是，这只有在您始终维护用于引导 Angular 应用程序的预定义根路由时才能正常工作。

即www.site.com/Home#/login 或 www.site.com/Home!/login 如果使用 $locationProvider.hashPrefix('!')。 html5Mode(真);。

完全重新加载您的根 URL 将加载您的主要索引内容，重新初始化 Angular 应用程序并选择相应的客户端路由(在本例中将是登录路由和与该路由关联的模块)。然而，一旦偏离这一点，就会遇到不愉快的路径问题。

不幸的道路

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

其他问题

• Home/Index.cshtml - 由于您正在混合两个世界，我建议允许 Angular 在加载后控制和驱动所有导航。这将包括调用部分路由并加载 Razor View ，就好像它们是模板一样(如果您想继续使用 Razor)。
• Login/Index.cshtml - 这真的很棘手。一种选择是检测他们是否从 Ajax 调用此路由。如果是，请允许该请求。如果不是，则重定向回索引，因为它们正在执行整页加载。另一种选择是提供整个 url，但您需要确保您的 Angular 应用程序入口点也已交付。然后，您可以在加载 Angular 应用程序以加载主页内容后施展魔法，然后弹出模式。但是，一旦遇到这种性质的其他情况，这很快就会变得一团糟。
• 如果我有一个包含多个列表的页面怎么办？ - 你会一次显示多个列表吗？如果是这样，那很好，因为您实际上可以加载父状态/模板/ Controller ，然后包含其他子模板/ Controller ，而无需更改父状态。然而，这个问题非常广泛和复杂，确实需要成为一个单独的、具体的问题。

这可能看起来像什么

您可能想要声明一个路由来处理您的默认入口点:

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

主.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>

应用程序.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
        })
    });