通過Web Api 和 Angular.js 構建單頁面的web 程序

在傳統的web 應用程序中，瀏覽器端通過向服務器端發送請求，然后服務器端根據這個請求發送HTML到瀏覽器，這個響應將會影響整個的頁面，比如說：用戶通過一個連接導航到一個頁面，會發送一個請求到服務器端，接下來服務器將會發送一個新的頁面給瀏覽器。
但是在單頁面應用程序中，整個頁面只是在瀏覽器一開始請求的時候才會加載，接下來的請求，下來的交互請求都是通過ajax 來完成的，這就意味著只有部分的頁面會更新，并不需要去加載整個的頁面，這就減少了對用戶操作的響應時間，從而使用戶有一個更流暢的體驗。但是在傳統的web 應用程序中，并不存在這樣的架構，但是新興的技術比如web api ，angular.js 等很容易的去設計和實現單頁面的web 應用程序。如圖便是單頁面程序的原理：

本文將演示如何通過web api 和angular.js 來創建web 應用程序的。

首先打開vs 2013 然后新建一個asp.NET 應用程序，注意勾選web api 選項，如圖：

在models 文件夾新建一個user類：

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

然后創建一個web api :UserController,本文就演示如何加載和添加數據，相信如果看懂本文的話更新和刪除都會做的。

 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     }

接下來我們就需要用anjular.js來創建接口了，首先需要安裝angular.js 。angular.js 是一個開源的基于mvc的JavaScript框架，可以更好的開發和測試web應用程序。我們可以用vs 的包管理工具來安裝angualr.js。視圖>其他窗口>程序包管理器控制臺 輸入一下代碼 安裝angular.js：

成功之后，Scripts 文件夾會有anjular.js 的相關文件。我們知道anjular.js 基于mvc 的 首先我們新建一個controller 在scripts 文件夾命名為appcontroller.js

 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 }

其中代碼中 :

ng-app:表示的是告訴angular.js 哪個dom 的根元素用的這個模塊。

ng-controller:是告訴angular.js 哪個dom元素是用過這個controller。

ng-click:表示用戶點擊的時候會調用哪個函數。

{{}}：這個是數據綁定的語法。

效果如圖：