經過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 User
2     {
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:表示用戶點擊的時候會調用哪一個函數。

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

效果如圖：

總結：

我也是初步的學習anjular.js。感受和knockout.js 有點相似。其實學習這些不難，只要掌握它的原理，熟悉它的語法。我相信能很快的上手。anjular.js 是支持雙向綁定的，它的好多功能尚未詳細的瞭解，之後還會分享。總之咱們掌握了這些就不須要去作有一些dom的操做和寫一些冗餘的代碼了。