Csharp/C#教程:使用ASP.Net MVC RouteConfig的AngularJS Ui-Router。 它是如何工作的?分享


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

我正在阅读这篇文章 ,我仍然无法理解Angular的UI路由器如何使用ASP.Net路由。

有人能够以简单明了的方式解释从手动输入URL到浏览器的整个生命周期(例如: http:// myapp / stateOne )。 谁处理请求,ASP.Net? 如果没有,如果页面由ASP提供,在它可以介入之前,角度如何拦截URL请求? AngularJS何时加入州提供商?

我对此非常困惑,对这个想法找不到多少。

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

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

HTML5模式正在运行,但只是以一种非常肤浅的方式。 刷新页面是将完整的URL发送到服务器(因为我们已经删除了苏格兰威士忌),它不知道该怎么做。 我们可以通过正确地重新配置MVC的RouteCollection来解决这个问题。 我们需要明确每个视图的路径,然后添加一个catch-all,将所有其他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应用程序的预定义根路由时,这才能正常工作。

如果使用$locationProvider.hashPrefix('!').html5Mode(true); www.site.com/Home#/loginwww.site.com/Home!/login $locationProvider.hashPrefix('!').html5Mode(true);

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

不开心的道路

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

其他问题

这可能是什么样的

您可能希望声明一个处理默认入口点的路径:

 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:

      

app.js

上述就是C#学习教程:使用ASP.Net MVC RouteConfig的AngularJS Ui-Router。 它是如何工作的?分享的全部内容,如果对大家有所用处且需要了解更多关于C#学习教程,希望大家多多关注—计算机技术网(www.ctvol.com)!

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

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/cdevelopment/959198.html

(0)
上一篇 2021年11月23日
下一篇 2021年11月23日

精彩推荐