Angular.js和WebAPI CRUD示例

Question

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

是否有这样的设置示例？

Answer 1

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

1）创建模块并设置路由。这些路由将允许您拥有一个基本HTML页面，其中的区域可以根据您在应用程序中单击的URL切换部分HTML“视图”。 AngularJS网站有一个tutorial where they do something similar。通知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
          }
);

有一个名为angular-app的好的github项目，它有一个基本的CRUD设置，向您展示如何布局角度应用程序本身，如何使用测试，如何最好地构造角度文件等。这也可能比这个小项目需要的多一点，但它至少可以为你提供一些关于如果你的应用程序增长如何前进的想法。