1     public class User
2     {
3         public int UserID { get; set; }
4         public string Name { get; set; }
5     }

 1     public class UserController : ApiController
 2     {
 3         private static List<User> userList = new List<User>() {
 4                                       new User(){ UserID=1, Name="zhangsan"},
 5                                       new User(){UserID=2, Name="lisi"},
 6                                       new  User (){UserID=3, Name="wangwu"},
 7                                       new User(){ UserID=4,Name="zhaoliu"}
 8         };
 9
10
11         public IEnumerable<User> Get()
12         {
13             return userList;
14         }
15         public void Post(User user)
16         {
17             userList.Add(user);
18         }
19
20     }

 1 var appmodule = angular.module('app', []);//angular是模块化的，所以首先我们需要实例化一个模块
 2
 3 //创建一个controller
 4 appmodule.controller('appcontroller', function ($scope, $http) {
 5
 6     $scope.UserID = '';
 7     $scope.Name = '';
 8     $scope.Users = [];
 9     $scope.Load = function () {
10
11         $http.get("/api/user").success(function (data, status) {
12
13             $scope.Users = data;
14         })
15
16     };
17
18     $scope.AddUser = function () {
19
20         $http.post("/api/user", { userid: $scope.UserID, name: $scope.Name }).success(function (data, status) {
21             $scope.Load();
22         })
23     };
24
25     $scope.Load();
26
27 });

 1 @{
 2     ViewBag.Title = "Home Page";
 3 }
 4
 5 <div ng-app="app">
 6
 7     <div ng-controller="appcontroller">
 8         <table>
 9             <caption>Add User</caption>
10             <tr><td>user ID</td><td>Name</td></tr>
11             <tr>
12                 <td><input type="text" ng-model="UserID"  placeholder="input the user id" /></td>
13                 <td><input type="text" ng-model="Name" placeholder="input the user name" /> </td>
14             </tr>
15             <tr>
16                 <td>
17                     <button ng-click="AddUser()">Add User</button>
18                 </td>
19             </tr>
20         </table>
21
22         <table class="table table-bordered table-hover">
23             <caption>User List</caption>
24             <thead>
25                 <tr>
26                     <th>User ID </th>
27                     <th>Name</th>
28                 </tr>
29             </thead>
30             <tbody>
31
32                 <tr ng-repeat="user in Users">
33                     <td>
34                         {{user.UserID}}
35                     </td>
36                     <td>
37                         {{user.Name}}
38                     </td>
39                 </tr>
40             </tbody>
41         </table>
42     </div>
43 </div>
44 @section scripts{
45     <script src="~/Scripts/angular.js"></script>
46     <script src="~/Scripts/appcontroller.js"></script>
47 }