带有ASP.Net MVC RouteConfig的AngularJS Ui-Router。它是如何工作的？ [英] AngularJS Ui-Router with ASP.Net MVC RouteConfig. How does it work?

问题描述

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

I'm reading this article and I still can't get around my head on how Angular's UI Router is working with ASP.Net routing.

有人可以简单地解释一下吗？明确的方式是从手动在浏览器中键入URL以来的整个生命周期（例如： http：// myapp / stateOne ）。 ASP.Net是谁处理请求的？如果不是，那么在ASP进入页面之前，Angular如何拦截URL请求？

Can someone explain in an easy and clear way, the full life cycle from when a URL is typed into the browser manually (ex: http://myapp/stateOne ). Who handles the request, ASP.Net? If not, how does angular intercept a URL request if the page is being served by ASP before it can step in? And when does AngularJS come in with the state provider?

我对此感到非常困惑，找不到很多想法。

I'm very confused on this and can't find much on the idea.

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

In addition to the question, I have a couple of other things I can't understand. I'm writing an app where:

• Home / Index.cshtml->着陆页根据状态提供内容（即： ui-view = content，例如，应在其中提供Categories / Index.cshtml）。因此，如何设置默认状态，以便导航到索引将加载主页和具有默认类别的ng-view内容？


• 登录/索引。 cshtml->一种模态形式，我使用modal.show（）和modal.hide（）隐藏和显示。从用户界面视图投放。可以了但是，如果用户键入 http：// myapp / login 怎么办？我可以以某种方式拦截请求并显示带有打开模式形式的索引页吗？甚至更好的是，当前页面并打开模态表单？ （即：是否可以不使用templateURL设置状态）？


• 如果我的页面中包含多个列表怎么办？我曾经见过人们将状态设置为state.childState，但是如果我需要一次加载多个列表（因此需要加载多个state->视图）怎么办？

• Home/Index.cshtml -> Landing page serves content based on states (ie: it has a ui-view="content", which should in turn serve Categories/Index.cshtml in it, for example). So, how would I go around setting the "Default state" so that navigating to index would load the home page and the ng-view content with default categories in it?
• Login/Index.cshtml -> A modal form which I'm hiding and showing using modal.show() and modal.hide(). Served from a ui-view. This is working. However, if the user types http://myapp/login what should I do? Can I somehow intercept the request and show the index page with the open modal form in it? or even better, the current page and just open up the modal form? (ie: Is it possible to set a state without a templateURL)?
• What if I have a page which has multiple lists in it? I've seen people set the state to state.childState for instance, but what if I need to load multiple lists (and therefore, multiple states-> views) at once?

编辑：
这部分特别注意，它使用黑魔法造成 routeTwo / 6 如果我理解正确的话，可以在UI视图中加载带有routeTwo页面的indexTwo页面。

Edit: Special attention to this part, which uses black magic to cause routeTwo/6 to load the index page with the routeTwo page loaded in a UI-View if I'm understanding correctly.

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

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.

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

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

推荐答案

快乐路径生命周期

1. 由于从URL请求内容时客户端尚未加载任何资源，因此向服务器发出了请求。 ASP.NET路由接收请求并返回该路由绑定的任何内容。


2. 如果返回索引（包含AngularJS App的入口点，HTML内容和后续资源


3. AngularJS在收到DOM ready事件后运行


4. AngularJS解析DOM并开始执行它遇到的各种组件。

1. A request is made to the server since the client hasn't loaded any resources yet when requesting content from a URL. ASP.NET routing picks up request and returns whatever content is bound for that route.
2. If the index is returned (that contains the entrance point to the AngularJS App, the HTML content and subsequent resources are loaded from the server.
3. AngularJS runs after receiving the DOM ready event
4. AngularJS parses the DOM and begins executing the various components that it encounters.

客户端路由

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

Once your application has loaded, client-side routing modules like ui-router ngRoute or the new component router will control the route for you and load content that is bound to that route. However, this only works properly if you always maintain to a pre-defined root route that you use to bootstrap your Angular application.

IE www.site.com/Home#/login 或 www.site.com/Home!/login （如果使用 $ locationProvider.hashPrefix（'！'）。html5Mode（true ）; 。

I.E. www.site.com/Home#/login or www.site.com/Home!/login if using $locationProvider.hashPrefix('!').html5Mode(true);.

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

Fully reloading your root URL will load your main index content, re-initialize the angular application and pick up the corresponding client-side routing (which in this case would be the login route and module associated with that route). However, once you deviate from this, you run into unhappy path concerns.

不愉快的道路

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

If you request a URL that does NOT return the entrance point to the AngularJS application, Angular has no way to intercept the request and, subsequently will never run. As a result, if a request is being made to a URL that is not the entrance point to the Angular application, you have to decide how you want to handle it. A common approach is to redirect to Index.

其他问题

• Home / Index.cshtml-由于您要混合两个世界，因此建议您在加载后允许Angular控制和驱动所有导航。这将包括调用部分路由，并像作为模板一样加载剃刀视图（如果您想继续使用Razor）。


• Login / Index.cshtml-这确实很棘手。一种选择是检测他们是否正在从Ajax调用此路由。如果是，请允许该请求。如果不是，请重定向回索引，因为他们正在执行整页加载。另一种选择是提供整个网址，但您需要确保还提供了角度应用入口。然后，您可以在加载角度应用程序以加载主页内容之后进行一些魔术操作，然后再弹出模式。但是，一旦遇到这种性质的其他情况，这很快就会变得混乱。


• 如果我的页面中包含多个列表怎么办？ -您会一次显示多个列表吗？如果是这样，那很好，因为您实际上可以加载父状态/模板/控制器，然后再包含其他子模板/控制器，而无需更改父状态。但是，这个问题非常广泛和复杂，确实需要单独解决一个特定问题。

这可能是什么外观

您需要声明一条处理默认入口点的路线：

You would want to declare a route that handles your default entrance point:

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

This way, if a user hit www.site.com, we would return the content from /Home/LoadMain. This content would include all of our required Angular references (Angular, UI-Router, our main app, etc), which would then allow us to default our client-side route to /home and subsequently load /Home/Index

Main.cshtml：

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

这篇关于带有ASP.Net MVC RouteConfig的AngularJS Ui-Router。它是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！