創(chuàng)新互聯(lián)公司的客戶(hù)來(lái)自各行各業(yè),為了共同目標(biāo),我們?cè)诠ぷ魃厦芮信浜?,從?chuàng)業(yè)型小企業(yè)到企事業(yè)單位,感謝他們對(duì)我們的要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。專(zhuān)業(yè)領(lǐng)域包括做網(wǎng)站、網(wǎng)站建設(shè)、電商網(wǎng)站開(kāi)發(fā)、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)。
在傳統(tǒng)的web 應(yīng)用程序中,瀏覽器端通過(guò)向服務(wù)器端發(fā)送請(qǐng)求,然后服務(wù)器端根據(jù)這個(gè)請(qǐng)求發(fā)送HTML到瀏覽器,這個(gè)響應(yīng)將會(huì)影響整個(gè)的頁(yè)面,比如說(shuō):用戶(hù)通過(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ì)用戶(hù)操作的響應(yīng)時(shí)間,從而使用戶(hù)有一個(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è)面程序的原理:
本文將演示如何通過(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類(lèi):
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à)更新和刪除都會(huì)做的。
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 }
接下來(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 <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 哪個(gè)dom 的根元素用的這個(gè)模塊。
ng-controller:是告訴angular.js 哪個(gè)dom元素是用過(guò)這個(gè)controller。
ng-click:表示用戶(hù)點(diǎn)擊的時(shí)候會(huì)調(diào)用哪個(gè)函數(shù)。
{{}}:這個(gè)是數(shù)據(jù)綁定的語(yǔ)法。
效果如圖:
當(dāng)前名稱(chēng):通過(guò)WebApi和Angular.js構(gòu)建單頁(yè)面的web程序
當(dāng)前網(wǎng)址:http://bm7419.com/article44/geiiee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、Google、靜態(tài)網(wǎng)站、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)