在傳統(tǒng)的web 應(yīng)用程序中，瀏覽器端通過(guò)向服務(wù)器端發(fā)送請(qǐng)求，然后服務(wù)器端根據(jù)這個(gè)請(qǐng)求發(fā)送HTML到瀏覽器，這個(gè)響應(yīng)將會(huì)影響整個(gè)的頁(yè)面，比如說(shuō)：用戶通過(guò)一個(gè)連接導(dǎo)航到一個(gè)頁(yè)面，會(huì)發(fā)送一個(gè)請(qǐng)求到服務(wù)器端，接下來(lái)服務(wù)器將會(huì)發(fā)送一個(gè)新的頁(yè)面給瀏覽器。
但是在單頁(yè)面應(yīng)用程序中，整個(gè)頁(yè)面只是在瀏覽器一開(kāi)始請(qǐng)求的時(shí)候才會(huì)加載，接下來(lái)的請(qǐng)求，下來(lái)的交互請(qǐng)求都是通過(guò)ajax 來(lái)完成的，這就意味著只有部分的頁(yè)面會(huì)更新，并不需要去加載整個(gè)的頁(yè)面，這就減少了對(duì)用戶操作的響應(yīng)時(shí)間，從而使用戶有一個(gè)更流暢的體驗(yàn)。但是在傳統(tǒng)的web 應(yīng)用程序中，并不存在這樣的架構(gòu)，但是新興的技術(shù)比如web api ，angular.js 等很容易的去設(shè)計(jì)和實(shí)現(xiàn)單頁(yè)面的web 應(yīng)用程序。如圖便是單頁(yè)面程序的原理：

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為沈丘企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，沈丘網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

  

本文將演示如何通過(guò)web api 和angular.js 來(lái)創(chuàng)建web 應(yīng)用程序的。

首先打開(kāi)vs 2013 然后新建一個(gè)asp.NET 應(yīng)用程序，注意勾選web api 選項(xiàng)，如圖：

在models 文件夾新建一個(gè)user類：

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

然后創(chuàng)建一個(gè)web api :UserController,本文就演示如何加載和添加數(shù)據(jù)，相信如果看懂本文的話更新和刪除都會(huì)做的。

 1     public class UserController : ApiController 2     { 3         private static List userList = new List() { 
 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 Get()12         {13             return userList;14         }15         public void Post(User user)16         {17             userList.Add(user);18         }19 20     }

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

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

 1 var appmodule = angular.module('app', []);//angular是模塊化的，所以首先我們需要實(shí)例化一個(gè)模塊 2  3 //創(chuàng)建一個(gè)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  6  7      8          9             10             11             12                 13                 14             15             16                 19             20         
Add User
user ID
Name
 
17                     Add User18                 
21 22         23             User List24             25                 26                     User ID 27                     Name28                 29             30             31 32                 33                     34                         `user`.`UserID`35                     36                     37                         `user`.`Name`38                                39                          40             41         42