using System.Data.Entity;   
using System.Data.Entity.Migrations;   
  
namespace WebApiDemo.Models   
{   
    public class DefaultDataInit:CreateDatabaseIfNotExists<DefaultContext>   
    {   
        public override void InitializeDatabase(DefaultContext context)   
        {   
            base.InitializeDatabase(context);   
            context.Student.AddOrUpdate(x => x.Name,   
                    new Student() { Name = "王小明", PhoneNumber = "0915808888", Address = "台中市" },   
                    new Student() { Name = "王大明", PhoneNumber = "0915801111", Address = "台北市" },   
                    new Student() { Name = "王大雄", PhoneNumber = "0915806666", Address = "台南市" },   
                    new Student() { Name = "王小雄", PhoneNumber = "0915800000", Address = "新北市" },   
                    new Student() { Name = "王小安", PhoneNumber = "0915807777", Address = "桃園市" }   
                );   
            context.SaveChanges();   
        }   
    }   
}  

<connectionStrings>   
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQL;Initial Catalog=AngularjsDB;Integrated Security=SSPI;" providerName="System.Data.SqlClient"/>   
</connectionStrings>  

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApiDemo.Models;

namespace WebApiDemo.Controllers
{
    public class ValuesController : ApiController
    {
        DefaultContext db = new DefaultContext();
        // GET api/values
        public IEnumerable<Student> Get()
        {
            return db.Student.ToList();
        }

        // POST api/values
        public Student Post(Student emp)
        {
            db.Student.Add(emp);
            db.SaveChanges();
            return emp;
        }

        // PUT api/values/5
        public void Put(Student emp)
        {
            db.Entry(emp).State = EntityState.Modified;
            db.SaveChanges();
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
           var emp =db.Student.Find(id);
           db.Entry(emp).State = EntityState.Deleted;
           db.SaveChanges();
        }
    }
}

<div class="row" ng-controller="FirstCtrl as firstCtrl">  
    <div ng-switch="View">  
        <div ng-switch-default>  
            <table class="table">  
                <tr>  
                    <th>姓名</th>  
                    <th>電話</th>  
                    <th>地址</th>  
                </tr>  
                <tr ng-repeat="item in firstCtrl.student">  
                    <td>{{item.Name}}</td>  
                    <td>{{item.PhoneNumber}}</td>  
                    <td>{{item.Address}}</td>  
                </tr>  
            </table>  
        </div>  
    </div>  
</div>  
@section scripts{   
<script src="~/App/Index.js"></script>  
}  

angular.module('MyApp', [])   
    .controller('FirstCtrl', function ($http) {   
        var Url = 'http://localhost:65414/Api/'  
        var vm = this;   
        $http.get(Url + 'Values').success(function (data) {   
            vm.Student = data;   
        }).error(function () {   
            alert('發生錯誤');   
        });   
    });  

angular.module('MyApp', [])   
    .controller('FirstCtrl', function ($http,$scope) {   
        var Url = 'http://localhost:65414/Api/'  
        var errorMessage = '發生錯誤';   
        var vm = this;   
           
        $http.get(Url + 'Values').success(function (data) {   
            vm.Student = data;   
        }).error(function () {   
            alert(errorMessage);   
        })   
  
        vm.AddClick = function () {   
            vm.View = 'add';   
            vm.SaveState = true;   
        } //改變狀態切換到add同時把儲存按鈕變成可以編輯   
  
        vm.SaveClick = function () {   
            if (vm.View === 'add') { //判斷ng-switch狀態，因為我用同一個儲存按鈕同時做新增和修改動作   
                $http.post(Url + 'Values', vm.Add).success(function (data) { //vm.Add是html的input值   
                    vm.Student.push(data); //這一段我是直接從web api回傳單筆資料回來，然後直接對陣列新增，就沒在從資料庫把值取回來   
                    vm.View = 'list';  //因為如果沒有相符就是default的狀態，所以我給list或null值都可以   
                    vm.SaveState = false; //把儲存按鈕切換成不可編輯的狀態   
                }).error(function () {   
                    alert(errorMessage);   
                })   
            } else {   
                $http.put(Url + 'Values', vm.Edit).success(function () { //vm.Edit是html裡的input值   
                    vm.View = 'list';   
                    vm.SaveState = false;   
                }).error(function () {   
                    alert(errorMessage);   
                })   
            }   
        }   
  
        vm.EditClick = function (item) {   
            vm.View = 'edit';   
            vm.SaveState = true;   
            vm.Edit = item;   
        }   
  
        vm.DeleteClick = function (ID,Index) { //ID是從前端傳過來，為了丟到後端做刪除動作，Index則是我要直接刪除陣列，不在從後端傳來資料   
            $http.delete(Url + 'Values/'+ID).success(function () {   
                vm.Student.splice(Index);   
            }).error(function () {   
                alert(errorMessage);u   
            })   
        }   
    });