公司在使用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="">
  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="" 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.                  $scope.nowUser = {};
  83.                  $scope.delete = function (userId, index) {//note: the function name is important
  84.                      if(confirm('are you sure delete this user?')){
  85.                          userDataService.deleteUserById(userId).then(function (response) {
  86.                              if (response.data === 'true') {
  87.                                  $scope.userList.splice(index, );
  88.                              }
  89.                              else {
  90.                                  console.log('delet uesr fail');
  91.                              }
  92.                          });
  93.                      }
  94.                  };
  95.  
  96.                  $scope.getUser = function (user) {
  97.                      $scope.nowUser = user;
  98.                  };
  99.  
  100.                  $scope.addUser = function (newUser) {
  101.                      userDataService.addUser(newUser).then(function (response) {
  102.                          if (response.data === 'true') {
  103.                              $scope.userList.push(newUser);
  104.                          }
  105.                          else {
  106.                              console.log('add uesr fail');
  107.                          }
  108.                      });
  109.                  };
  110.  
  111.                  $scope.modifyUser = function (newUser) {
  112.                      userDataService.modifyUser(newUser).then(function (response) {
  113.                          if (response.data === 'true') {
  114.                              $scope.userList.push(newUser);
  115.                          }
  116.                          else {
  117.                              console.log('delet uesr fail');
  118.                          }
  119.                      });
  120.                  };
  121.  
  122.                  $scope.initailInfo();
  123.              }]);
  124.  
  125.          infoApp.factory('userDataService', ['userHttpService', '$q', function (userHttpService, $q) {
  126.              var serive = {};
  127.  
  128.              serive.loadData = function () {
  129.                  var defer = $q.defer();
  130.                  userHttpService.getUser().then(function (response) {
  131.                      defer.resolve(response);
  132.                  });
  133.                  return defer.promise;
  134.              };
  135.  
  136.              serive.deleteUserById = function (userId) {
  137.                  var defer = $q.defer();
  138.                  userHttpService.deleteUserById(userId).then(function (response) {
  139.                      defer.resolve(response);
  140.                  });
  141.                  return defer.promise;
  142.              };
  143.  
  144.              serive.addUser = function (newUser) {
  145.                  var defer = $q.defer();
  146.                  userHttpService.addUser(newUser).then(function (response) {
  147.                      defer.resolve(response);
  148.                  });
  149.                  return defer.promise;
  150.              };
  151.  
  152.              serive.modifyUser = function (newUser) {
  153.                  var defer = $q.defer();
  154.                  userHttpService.modifyUser(newUser).then(function (response) {
  155.                      defer.resolve(response);
  156.                  });
  157.                  return defer.promise;
  158.              };
  159.              return serive;
  160.  
  161.          }]);
  162.  
  163.          infoApp.factory('userHttpService', ['$http', function ($http) {
  164.              var serive = {};
  165.              serive.getUser = function () {
  166.                  return $http.get('/api/user');
  167.              };
  168.  
  169.              serive.deleteUserById = function (userId) {
  170.                  return $http.get('/api/user/' + userId);
  171.              };
  172.  
  173.              serive.addUser = function (newUser) {
  174.                  return $http({
  175.                      method: 'POST',
  176.                      url: '/api/user/',
  177.                      data: newUser
  178.                  });
  179.              };
  180.  
  181.              serive.modifyUser = function (newUser) {
  182.                  return $http({
  183.                      method: 'PUT',
  184.                      url: '/api/user/',
  185.                      data: newUser
  186.                  });
  187.              };
  188.              return serive;
  189.          }]);
  190.      </script>
  191.  </body>
  192.  </html>

Js代码

　　 所有webAPI代码如下
  1.  public class UserController : ApiController
  2.     {
  3.         TrainEntities dbContext = new TrainEntities();
  4.         // GET api/user
  5.         [HttpGet]
  6.         public IEnumerable<User> GetUser()
  7.         {
  8.             return dbContext.Users.ToList();
  9.         }
  10.  
  11.         // GET api/user/5
  12.         [HttpGet]
  13.         public bool deleteById(int id)
  14.         {
  15.            var userModel= dbContext.Users.Find(id);
  16.            if (userModel != null)
  17.            {
  18.                dbContext.Users.Remove(userModel);
  19.                dbContext.SaveChanges();
  20.                return true;
  21.            }
  22.             return false;
  23.         }
  24.  
  25.         [HttpPost]
  26.         public bool AddUser(User newUser)
  27.         {
  28.             dbContext.Users.Add(newUser);
  29.  
  30.             int result=dbContext.SaveChanges();
  31.             if (result == )
  32.             {
  33.                 return true;
  34.             }
  35.             else
  36.             {
  37.                 return false;
  38.             }
  39.         }
  40.  
  41.         // PUT api/user/5
  42.         [HttpPut]
  43.         public bool ModifUser(User newUser)
  44.         {
  45.             User userModel = dbContext.Users.FirstOrDefault(e => e.UserID == newUser.UserID);
  46.             userModel.Name=newUser.Name;
  47.             userModel.Age = newUser.Age;
  48.             int result = dbContext.SaveChanges();
  49.             if (result == )
  50.             {
  51.                 return true;
  52.             }
  53.             else
  54.             {
  55.                 return false;
  56.             }
  57.         }
  58.     }

WebAPI代码

　  如果不知道如何建立一个空的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。

　　

C# webApi 与 AngularJs 实现增删改Demo 讲解（一）的更多相关文章

  1. Asp.net WebApi 项目示例（增删改查）

    1.WebApi是什么 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET ...

  2. Asp.Net WebApi学习教程之增删改查

    webapi简介 在asp.net中,创建一个HTTP服务,有很多方案,以前用ashx,一般处理程序(HttpHandler),现在可以用webapi 微软的web api是在vs2012上的mvc4 ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  4. AngularJS的增删改查、state嵌套案例，不涉及服务端

    本篇实践一个案例,大致是:左边有导航菜单,右边显示列表,并可对列表项编辑或删除,也可添加新的列表项.借此,可体会到:如何组织可扩展的AngualrJS文件结构,如何点击左侧菜单项右侧显示相应内容,an ...

  5. 23Spring_JdbcTemplate来实现单表的增删改查

    第一步建表:

  6. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-2.使用Mybatis注解开发视频列表增删改查

    笔记 2.使用Mybatis注解开发视频列表增删改查     讲解:使用Mybatis3.x注解方式 增删改查实操, 控制台打印sql语句              1.控制台打印sql语句      ...

  7. 基于Angular+WebAPI+OData的增删改查

    对于在ASP.NET WebAPI中怎么使用OData,已经在我前面的日志中的说明, 在ASP.NET Web API中使用OData 在这个示例中.我新建了一个Order的实体,在前端使用Angul ...

  8. 前端使用AngularJS的$resource,后端ASP.NET Web API，实现增删改查

    AngularJS中的$resource服务相比$http服务更适合与RESTful服务进行交互.本篇后端使用ASP.NET Web API, 前端使用$resource,实现增删改查. 本系列包括: ...

  9. 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查

    品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人 ...

随机推荐

  1. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. Intellij IDEA连接Git@OSC

    错误提示:fatal: remote origin already exists. 解决办法:$ git remote rm origin http://my.oschina.net/lujianin ...

  3. Dockerfile指令

    指令的一般格式为INSTRUCTION arguments,指令包括FROM.MAINTAINER.RUN等. FROM 格式为FROM <image>或FROM <image> ...

  4. php利用zookeeper作dispatcher服务器

    ===== https://blog.eood.cn/php_share_memory 最常见的apc 可以缓存php的opcode提高应用的性能,可以在同个php-fpm进程池间共享数据 常见功能: ...

  5. sql 下，float和numeric

    搜了下两者的区别,答案其实很明显: numeric支持最长38位长度的数字,只有在你要的数字的长度超过38位时才推荐使用float 原因是,float在保存和提取,以及数学计算等方面,会产生于期待记过 ...

  6. Android接收系统广播

    Android内置了很多系统级别的广播,我们可以在应用程序中通过监听这些广播来得到各种系统的状态信息.比如手机开机完成后会发出一条广播,电池的电量发生变化会发出一条广播,时间或时区发生改变也会发出一条 ...

  7. c# 高效率导出多维表头excel

    [DllImport("User32.dll", CharSet = CharSet.Auto)] public static extern int GetWindowThread ...

  8. How to configure Veritas NetBackup (tm) to write Unified and Legacy log files to a different directory

    Problem DOCUMENTATION: How to configure Veritas NetBackup (tm) to write Unified and Legacy log files ...

  9. 安卓:drawable

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  10. 主机+虚拟机ubuntu+mini2440开发板互相ping通

    折腾这么久,终于将主机,虚拟机和开发板三者之间能够相互ping通,虽然还没有实现我要的功能,不管怎么说先将步骤简单的概括下,用交叉网线将开发板与主机相连,开发板与主机的ip要设置在同一网段内,在配置u ...