2

我正在过渡到一起使用 Angular 和 Web API。Visual Studio 中的 MVC/Web API 模板的根路径指向 HomeController.cs，它返回一个 View..

如何让根路径指向 Angular html 文件？服务器端路由的概念是否需要以某种方式消失？我很困惑，没有找到任何关于如何从 MVC/Web API 模板过渡到使用 angular 以及如何处理模板创建的额外文件的信息。据我了解

  1. 在 VS 中创建 Web API 模板
  2. 在根目录中创建 index.html 页面，其中包含指向其他 Angular html 页面的 ng 指令，并用作它们的一种母版页
  3. 然后我想我需要摆脱 ASP.NET MVC 路由，以便它以老式 webforms 类型的方式工作，将文件指定为默认文件？
4

1 回答 1

4

让我试一试，因为我们使用的是相同的 ASP.Net MVC、WebApi 和 AngularJS 堆栈。还假设您正在创建一个 SPA。

首先，让 Web API 远离画面。它的适用性仅限于发送不同格式的数据，其中没有视图概念。

您可以同时使用服务器端路由和角度路由来为用户提供视图。它们实际上可以相互补充。

像母版页一样，angular 需要有一个主页，其中有ng-app声明。从 MVC 的角度来看home\index.cshtml，可以加载初始视图。为此index页面生成的服务器大小视图可以包含ng-app指令和ng-view指令。

ng-view是视图将被交换\加载的主要区域。您可以将ng-view其@RenderBody()与服务器端的方法进行比较。请记住在使用 Angular 时从母版页中删除@RenderBody()调用。您不会在加载主页时删除 RenderBody。相反，应该只加载一个包含 div 的索引页面ng-view。

您现在将为加载的每个局部视图创建服务器端视图ng-view。例如，当客户端上的userlist.cshtml路由更改为#/users客户端上时，可能会加载一个视图。要从服务器加载这些视图，您需要在 中提供templateUrl，$routeProvide此模板 url 将由服务器路由 ( /user/index) 解析。

创建这些子视图时要记住的事情是

  • 他们不应继承任何母版页。
  • 因此应该只发送需要注入该ng-view部分的内容，所以没有<html>, <body>标签。
  • 它们可以包含角度绑定和其他角度声明性内容。

一旦 Angular 加载了初始模板，它可能会再次调用服务器以加载模板的数据。这就是 Web API 发挥作用的地方。类似的调用/api/users将返回有关所有用户的 json 数据。然后返回的数据可用于将视图+数据绑定在一起。

希望我已经说清楚了。

于 2013-08-28T14:41:25.240 回答