asp.net-mvc - Angular.js 和 WebAPI CRUD 示例

Question

我有一个 asp.net mvc4 Web 应用程序，例如它允许我管理站点的成员和成员资源。在会员的主页上，有几个关于他们个人资料的不同部分。我想使用 angular.js 和 webapi(entityframework) 来允许他们编辑他们的地址详细信息并在没有页面回发的情况下保存它们。我想最好的起点是有一个局部视图，它将这些地址详细信息显示为主页视图的一部分。

有没有这种设置的例子？

Answer 1

你绝对可以做到这一点。首先，要根据用户选择的部分切换详细信息，您有两个选项：

1）创建一个模块并设置路由。这些路由将允许您拥有一个基本 HTML 页面，其中您可以根据您在应用程序中单击的 URL 来切换部分 HTML“视图”。AngularJS 站点有一个教程，他们在其中做类似的事情。注意 ng-view 的解释。

2) 您可以创建自定义指令并获取外部 HTML 部分页面。在指令中，您“编译” HTML 部分，它允许您使用该页面上的任何指令（ng-click、ng-class 等），然后在原始页面中声明 div 的位置呈现它。这有点高级，所以先看一下 ng-view 的例子。

要将数据发送回 mvc 应用程序，您需要在 Angular 中做的就是声明一个资源，其 url 返回到您发布数据的 mvc 应用程序，然后向其发送一些数据。像这样的东西：

$resource('api/updateUserData',
          {userName: userNameVar, userEmail: userEmailVar},
          function(data){
            //callback code where you do something with the returned data if any
          }
);

有一个很好的 github 项目，叫做angular-app，它有一个基本的 CRUD 设置，向你展示如何布局 Angular 应用程序本身，如何使用测试，如何最好地构建 Angular 文件等。这也可能比你需要这个小项目，但如果你的应用程序增长，它至少可以给你一些关于如何前进的想法。