在传统的web 应用程序中，浏览器端通过向服务器端发送请求，然后服务器端根据这个请求发送HTML到浏览器，这个响应将会影响整个的页面，比如说：用户通过一个连接导航到一个页面，会发送一个请求到服务器端，接下来服务器将会发送一个新的页面给浏览器。
但是在单页面应用程序中，整个页面只是在浏览器一开始请求的时候才会加载，接下来的请求，下来的交互请求都是通过ajax 来完成的，这就意味着只有部分的页面会更新，并不需要去加载整个的页面，这就减少了对用户操作的响应时间，从而使用户有一个更流畅的体验。但是在传统的web 应用程序中，并不存在这样的架构，但是新兴的技术比如web api ，angular.js 等很容易的去设计和实现单页面的web 应用程序。如图便是单页面程序的原理：
本文将演示如何通过web api 和angular.js 来创建web 应用程序的。
首先打开vs 然后新建一个 应用程序，注意勾选web api 选项，如图：
在models 文件夹新建一个user类：
1 public classUser2 {3 public int UserID { get; set; }4 public string Name { get; set; }5 }
然后创建一个web api :UserController,本文就演示如何加载和添加数据，相信如果看懂本文的话更新和删除都会做的。
1 public classUserController : ApiController2 {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 IEnumerableGet()12 {13 returnuserList;14 }15 public voidPost(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
6
7
8
9
Add User
10
user IDName
11
12
13
14
15
16
17 Add User
18
19
20
21
22
23
User List
24
25
26
User ID
27
Name
28
29
30
31
32
33
34 {{user.UserID}}35
36
37 {{user.Name}}38
39
40
41
42
