C# webApi 与 AngularJs 实现增删改Demo 讲解（一）

　　公司在使用webAPI+AngularJs+SlcikGrid进行产品开发，自己也是初学Angular，就做了一个Demo，实现增删改功能，希望可以帮助大家。

　　　界面如同所示：

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。