基于angularjs的单页面实例_通过Web Api 和 Angular.js 构建单页面的web 程序-CSDN博客

本文链接：https://blog.csdn.net/weixin_39627408/article/details/111745366

在传统的web 应用程序中，浏览器端通过向服务器端发送请求，然后服务器端根据这个请求发送HTML到浏览器，这个响应将会影响整个的页面，比如说：用户通过一个连接导航到一个页面，会发送一个请求到服务器端，接下来服务器将会发送一个新的页面给浏览器。

但是在单页面应用程序中，整个页面只是在浏览器一开始请求的时候才会加载，接下来的请求，下来的交互请求都是通过ajax 来完成的，这就意味着只有部分的页面会更新，并不需要去加载整个的页面，这就减少了对用户操作的响应时间，从而使用户有一个更流畅的体验。但是在传统的web 应用程序中，并不存在这样的架构，但是新兴的技术比如web api ，angular.js 等很容易的去设计和实现单页面的web 应用程序。如图便是单页面程序的原理：

本文将演示如何通过web api 和angular.js 来创建web 应用程序的。

首先打开vs 2013 然后新建一个asp.net 应用程序，注意勾选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

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是模块化的，所以首先我们需要实例化一个模块

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 });