创新互联公司的客户来自各行各业,为了共同目标,我们在工作上密切配合,从创业型小企业到企事业单位,感谢他们对我们的要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括做网站、网站建设、电商网站开发、微信营销、系统平台开发。
在传统的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 ListuserList = 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 }
接下来我们就需要用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 56 744 @section scripts{45 46 47 }8439
21 22Add User 1011 user ID Name 12 1513 14 16 2017 18 1923
42User List 24 2526 29 30 31 32User ID 27Name 2833 40 4134 `user`.`UserID`35 3637 `user`.`Name`38 39
其中代码中 :
ng-app:表示的是告诉angular.js 哪个dom 的根元素用的这个模块。
ng-controller:是告诉angular.js 哪个dom元素是用过这个controller。
ng-click:表示用户点击的时候会调用哪个函数。
{{}}:这个是数据绑定的语法。
效果如图: