当前位置: 首页 > 面试题库 >

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

咸正平
2023-03-14
问题内容

我正在阅读本文,但我仍然无法理解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" });
}

问题答案:

快乐路径生命周期

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

客户端路由

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

IE浏览器www.site.com/Home#/loginwww.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
        })
    });


 类似资料:
  • 假设我们有一个名为托管在tomcat上的服务提供商应用程序,用户单击指向SP a的链接。SP a没有看到提供的令牌,因此它会将用户重定向到IdP进行身份验证(通过某种方式提供SAML Authn请求)。然后,IdP将用户重定向到提供凭据的某个公共登录页面,假设这些凭据正确,IdP将创建一个SAML响应,其中包含一个令牌和一些关于主题的断言,并将其发送回SP a。SP a看到了这一点,并允许用户访问

  • 为了减少内核或跨进程内存泄漏(Spectre攻击),Linux内核1将使用一个新选项编译,引入到,以便通过所谓的retpoline执行间接调用。 这似乎是一个新发明的术语,因为谷歌搜索只是最近才使用(通常都是在2018年)。 1但是,它不是Linux特有的--类似或相同的构造似乎被用作其他操作系统缓解策略的一部分。

  • 我们知道主存域很少:年轻的、终生的(旧的gen)和PermGen。 年轻领域分为伊甸园和幸存者(有两个)。 OldGen用于生存的对象。 MaxTenuringThreshold防止对象过早地被最终复制到OldGen空间。这很清楚,也很容易理解。 但是它是如何工作的呢?垃圾回收器如何处理这些在MaxTenuringThreshold之前仍然存在的对象,以何种方式?它们位于何处? 对象被复制回幸存者

  • 在我加入的新项目中,他们一直交替使用术语Hibernate和JPA。所以,我试图深入研究代码并试图理解整个事情是如何工作的(我是Spring、JPA和Hibernate世界的新手)。我将尝试将代码放在这里以更好地理解:1)有一个@Configuration类,其中有以下内容: 因此,在这个配置类中,我们返回一个EntityManagerFactory。 2) 然后是一个标记为@persistor的

  • 我正在尝试更新spring缓存中的值,但是@cacheput并没有替换实际值,而是使用相同的键放入另一个值: CacheName:NotimeCache: 键:SYSTEM_STATUS,值:on 键:SYSTEM_STATUS,值:off

  • 因此,我需要开始考虑关联,最好是利用我对并发工具的现有知识来加快进程。 我试着为他们跟踪Google codelab,虽然它给了我一点理解,但它也提出了许多未回答的问题,所以我试图通过编写一些代码、调试和查看日志输出来弄脏我的手。 根据我的理解,一个coroutine由两个主要构件组成;挂起函数是您执行工作的地方,而coroutine上下文是您执行挂起函数的地方,这样您就可以对coroutine将