C# webApi 与 AngularJs 实现增删改Demo 讲解（一）
公司在使用webAPI+AngularJs+SlcikGrid进行产品开发，自己也是初学Angular，就做了一个Demo，实现增删改功能，希望可以帮助大家。
界面如同所示：
数据库一张单表很简单，如图所示：
所有JS代码如下：
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="infoApp">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script src="../Scripts/angular.min.js"></script>
6 <title></title>
7 <style type="text/css">
8 .textCenter {
9 text-align: center;
10 }
11 </style>
12 </head>
13 <body>
14 <div data-ng-controller="userController">
15 <div>
16 <table border="1">
17 <tr class="textCenter">
18 <td style="width: 100px;">姓名</td>
19 <td style="width: 60px;">年龄</td>
20 <td style="width: 60px;"></td>
21 </tr>
22 <tr class="textCenter" data-ng-repeat="user in userList">
23 <td>
24 <input type="text" data-ng-model="user.Name" data-ng-click="getUser(user)" data-ng-keyup="modifyUser(user)" />
25 </td>
26 <td>
27 <input type="text" data-ng-model="user.Age" data-ng-click="getUser(user)" data-ng-keyup="modifyUser(user)" />
28 </td>
29 <td>
30 <input type="button" data-ng-click="delete(user.UserID,$index)" value="删除" />
31 </td>
32 </tr>
33 </table>
34 </div>
35
36 <div>
37 <fieldset>
38 <legend>人员详细信息</legend>
39 Name：<input type="text" data-ng-model="nowUser.Name" />
40 Age:<input type="text" data-ng-model="nowUser.Age" />
41 </fieldset>
42 </div>
43
44 <div>
45 <fieldset>
46 <legend>新增人员信息</legend>
47 <table>
48 <tr>
49 <td style="width: 50px;">Name:</td>
50 <td>
51 <input type="text" data-ng-model="newUser.Name" /></td>
52 </tr>
53 <tr>
54 <td style="width: 50px;">Age:</td>
55 <td>
56 <input type="number" data-ng-model="newUser.Age" /></td>
57 </tr>
58 <tr>
59 <td colspan="2" style="text-align: right;">
60 <input type="button" data-ng-click="addUser(newUser)" value="addUser" /></td>
61 </tr>
62 </table>
63 </fieldset>
64 </div>
65 <!-- <input type="text" data-ng-model="full_name" placeholder="Enter your full name" />-->
66 </div>
67 <script type="text/javascript">
68 var infoApp = angular.module('infoApp', []);
69 infoApp.controller('userController', ['$scope', 'userDataService',
70 function ($scope, userDataService) {
71 $scope.initailInfo = function () {
72
73 userDataService.loadData().then(function (list) {
74 $scope.userList = list.data;
75 });
76 };
77
78 $scope.$watch('nowUser.Name', function (newVal, oldVal, scope) {
79 console.log(newVal + '------' + oldVal);
80 });
81
82
83 $scope.nowUser = {};
84 $scope.delete = function (userId, index) {//note: the function name is important
85 if(confirm('are you sure delete this user?')){
86 userDataService.deleteUserById(userId).then(function (response) {
87 if (response.data === 'true') {
88 $scope.userList.splice(index, 1);
89 }
90 else {
91 console.log('delet uesr fail');
92 }
93 });
94 }
95 };
96
97 $scope.getUser = function (user) {
98 $scope.nowUser = user;
99 };
100
101 $scope.addUser = function (newUser) {
102 userDataService.addUser(newUser).then(function (response) {
103 if (response.data === 'true') {
104 $scope.userList.push(newUser);
105 }
106 else {
107 console.log('add uesr fail');
108 }
109 });
110 };
111
112 $scope.modifyUser = function (newUser) {
113 userDataService.modifyUser(newUser).then(function (response) {
114 if (response.data === 'true') {
115 $scope.userList.push(newUser);
116 }
117 else {
118 console.log('delet uesr fail');
119 }
120 });
121 };
122
123 $scope.initailInfo();
124 }]);
125
126 infoApp.factory('userDataService', ['userHttpService', '$q', function (userHttpService, $q) {
127 var serive = {};
128
129 serive.loadData = function () {
130 var defer = $q.defer();
131 userHttpService.getUser().then(function (response) {
132 defer.resolve(response);
133 });
134 return defer.promise;
135 };
136
137 serive.deleteUserById = function (userId) {
138 var defer = $q.defer();
139 userHttpService.deleteUserById(userId).then(function (response) {
140 defer.resolve(response);
141 });
142 return defer.promise;
143 };
144
145 serive.addUser = function (newUser) {
146 var defer = $q.defer();
147 userHttpService.addUser(newUser).then(function (response) {
148 defer.resolve(response);
149 });
150 return defer.promise;
151 };
152
153 serive.modifyUser = function (newUser) {
154 var defer = $q.defer();
155 userHttpService.modifyUser(newUser).then(function (response) {
156 defer.resolve(response);
157 });
158 return defer.promise;
159 };
160 return serive;
161
162 }]);
163
164 infoApp.factory('userHttpService', ['$http', function ($http) {
165 var serive = {};
166 serive.getUser = function () {
167 return $http.get('/api/user');
168 };
169
170 serive.deleteUserById = function (userId) {
171 return $http.get('/api/user/' + userId);
172 };
173
174 serive.addUser = function (newUser) {
175 return $http({
176 method: 'POST',
177 url: '/api/user/',
178 data: newUser
179 });
180 };
181
182 serive.modifyUser = function (newUser) {
183 return $http({
184 method: 'PUT',
185 url: '/api/user/',
186 data: newUser
187 });
188 };
189 return serive;
190 }]);
191 </script>
192 </body>
193 </html>
所有webAPI代码如下
public class UserController : ApiController
{
TrainEntities dbContext = new TrainEntities();
// GET api/user
[HttpGet]
public IEnumerable<User> GetUser()
{
return dbContext.Users.ToList();
}
// GET api/user/5
[HttpGet]
public bool deleteById(int id)
{
var userModel= dbContext.Users.Find(id);
if (userModel != null)
{
dbContext.Users.Remove(userModel);
dbContext.SaveChanges();
return true;
}
return false;
}
[HttpPost]
public bool AddUser(User newUser)
{
dbContext.Users.Add(newUser);
int result=dbContext.SaveChanges();
if (result == 1)
{
return true;
}
else
{
return false;
}
}
// PUT api/user/5
[HttpPut]
public bool ModifUser(User newUser)
{
User userModel = dbContext.Users.FirstOrDefault(e => e.UserID == newUser.UserID);
userModel.Name=newUser.Name;
userModel.Age = newUser.Age;
int result = dbContext.SaveChanges();
if (result == 1)
{
return true;
}
else
{
return false;
}
}
}
如果不知道如何建立一个空的WebAPI工程，可以查看其它资料，这里，我建了Entity ，以.edmx结尾的数据容器。
现在依据JS代码，阐述下我对Angular的理解。
（一）模块 module
Angular代码是分模块的（第68行代码），并且需要用ng-app指定使用范围区域（第2行代码），
我这里放在整个HTML页面里，当然，也可以放在某个Div里。
angular.module()里面有两个参数，第一个参数是模块名称，第二个参数是依赖模块列表。
（二）作用域（scope）
这里暂时不讲Angular怎么取数据的，放在后面再说。
通过WebAPI，我返回给前端是IEnumberable<T>类型的数据，Angular拿到数据后，直接转换成了JSON格式的数据，这让开发人员省掉了不少麻烦。
拿到JSON格式的数据后，我做了下面操作
将值赋给了一个Angular的内置服务$scope,并自定义变量userList。
$scope称之为作用域，它的父亲是$rootScope，是所有$scope对象的最上层。
AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。
$rootScope是最接近全局作用域的对象，$scope充当数据模型的角色，我们可以在上面任意添加或修改属性。
请记住：$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，负责连接视图和控制器controller。
