在 AngularJS 路由中，templateUrl 如何在不指向 .html 文件的情况下工作

Question

我试图理解 AngularJS 路由与 ASP.net MVC 一起使用时的情况。我正在关注此 article 以了解 AngularJS 路由。我的查询特定于 'templateURL' 的用法。我知道在纯 AngularJS 路由中，templateUrl 指向特定的“.html”页面。但是在我在互联网上看到的 AngularJS 和 ASP.net MVC 的许多示例应用程序中，我看到 templateURL 没有指向特定的 .html，而是指向给出了 view 文件夹，而不是 .html 文件（或 .cshtml 文件，我知道它只能由 ASP.net MVC 框架处理）。例如文章中，下面是AngularJSjavascript中给出的路由信息：

    NbCapp.config(function ($routeProvider) {
 $routeProvider
 .when('/ondemand', {
 controller: 'onDemandController',
 templateUrl: 'ondemand/ondemand'
 })
 .when('/results', {
 controller: 'resultsController',
 templateUrl: 'results/results'
 })
 .otherwise({ redirectTo: '/results' });
});

从上面可以看出，所有路由都指向文件夹而不是 .html 文件。谁能帮我理解这是如何工作的。

Answer 1

I understand that in pure AngularJS routing, templateUrl points to a specific '.html' page.

不一定。扩展是什么或者是否有扩展都没有关系。唯一重要的是作为模板获取的文档的 Content-Type。所以只要它是 text/html - 它就可以用作模板。（实际上将发出模板的 GET 请求并将响应作为模板处理（将显示在页面上），所以服务器响应 Angular 并不重要，只会获取响应的 responseText数据，但最好是 text/html).

在您的示例中，templateUrl: 'results/results' 可能指向一些动态框架解析的用户友好路径，没有任何扩展，它以 HTML 内容响应。

Answer 2

AngularJS 不一定要指向 HTML 页面。您在上面指定的是 controller/action 的组合。当您调用一个操作时，您会得到一个已处理的 CSHTML、VBHTML 或 ASPX 作为 HTML 响应。

例如，指定：

templateUrl: 'Account/LogOn'

将实例化一个 AccountController 并调用 LogOn 操作，该操作将 return PartialViewResult.

Answer 3

templateUrl 不要求ui仅 .html 模板。基本上 ui-route 从给定模板 url 加载内容并接受 Content-Type：'text/html'。模板加载由 ajax 完成。

因此您可以自由加载具有任何扩展名但具有有效路径的任何模板。

Answer 4

在Asp.net MVC中我们在RouteConfig文件中定义自定义路由。假设在 RouteConfig 中我们声明了自定义路由如下：

routes.MapRoute("AngularTemplates", "almight/{name}", new { controller = "Home", action = "Template" });

并且在app.js文件中，我们配置了angular路由如下：-

var app = angular.module("BeautyParlorAppModule", ["ngRoute"]);
app.config(function ($routeProvider) {
debugger

$routeProvider
      .when("/DetailView",
              {
                  templateUrl: "almight/detailsView",
                  controller: "DetailviewController"
              }
      )
      .when("/ListView",
              {
                  templateUrl: "almight/_ListView",
                  controller: "ListViewController"
              }
      );
});

在 HTML 文件中我们有这样的操作：

<div class="row">
<div class="col-md-12">
    <div class="nav">
        <ul>
            <li><a href="/#/ListView">Show ListView</a></li>
            <li><a href="/#/DetailView">Show DetailView</a></li>
        </ul>
    </div>
</div>

点击 link 将找到 MVC 的主控制器并使用 Name 参数 _ListView 或 detailsView

调用操作 Template

 public class HomeController : Controller
    {
        public ActionResult Index(string id)

        {
            return View();
        }
        public ActionResult Template(string name)
        {
            if (name == null || !Regex.IsMatch(name, @"^[-\w]+$"))
                throw new ArgumentException("Illegal template name", name");

                                    relativeViewPath=String.Format("~/Views/Home/{0}.cshtml",name);    
            return View(relativeViewPath);
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }

在 AngularJS 路由中，templateUrl 如何在不指向 .html 文件的情况下工作

In AngularJS routing, how templateUrl works without pointing to a .html file

asp.net-mvc

angularjs

angularjs-routing