實(shí)例詳解angularjs和ajax的結(jié)合使用

更新時(shí)間：2015年10月22日 15:20:49 投稿：mrr

本篇文章給大家介紹angularjs和ajax的結(jié)合使用，本文介紹的非常詳細(xì)，對(duì)angularjs和ajax感興趣的朋友一起參考下吧

這是一篇關(guān)于easyui配合ajax使用的文章，順帶介紹angularjs的使用以及讓你感受到angularjs的威力。網(wǎng)上對(duì)于ajax 的文也是多如牛毛。我就不直接從那種原生的httpxmlrequest 對(duì)象的js 寫起了哈?？茨欠N東西也存粹是了解高層的東西是怎么來(lái)的原理是啥真正做的時(shí)候?qū)懩欠N東西不是扯淡么你叼你技術(shù)牛逼整站的代碼你全用那種寫。html js 這種東西最開(kāi)始設(shè)計(jì)出來(lái)就沒(méi)考慮周全就是坨屎。還好現(xiàn)在有各種框架可以幫助我們更容易的把這坨屎做的更美味。也還好由于互聯(lián)網(wǎng)事業(yè)如日中天的推動(dòng) 讓瀏覽器端的這堆東西正在往統(tǒng)一規(guī)范的方向發(fā)展。

我們來(lái)建立一個(gè)webform頁(yè)面 HelloAjaxNet.aspx。先說(shuō)下ajax 這里我使用網(wǎng)上流傳甚廣的那個(gè)AjaxPro.2.dll 他的網(wǎng)站是 http://www.ajaxpro.info/ 這是一個(gè)個(gè)人作品，很好用。

本來(lái)新的asp.net 里自帶了服務(wù)端方法用webmethod 屬性聲明客戶端pagemethods訪問(wèn)的方式，各種對(duì)象也可以json數(shù)據(jù)化，功能跟上面一樣的。微軟自帶的是aspx的codebehind 代碼方法一定要加static ，至于webconfig 在新版的vs2013開(kāi)發(fā)環(huán)境下無(wú)須配置如果是老的則新建ajax網(wǎng)站項(xiàng)目則webconfig自動(dòng)弄好了然后服務(wù)端頁(yè)面載入事件中 ScriptManager.GetCurrent(Page).EnablePageMethods = true; 客戶端必須有runat=server 的form 和 <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> 然后客戶端就可以pagemethods 的方式訪問(wèn)。

我始終還是認(rèn)為上面那個(gè)更好用。關(guān)于他的原理我就不多說(shuō)了，通過(guò)頁(yè)面載入時(shí)注冊(cè)服務(wù)端對(duì)象，然后生成的html頁(yè)面上就多了這么幾句

 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/core.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.StudentsInfo,WebApplication.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.Grad,WebApplication.ashx"></script>
 <script type="text/javascript" 
src="/ajaxpro/WebApplication.NewFolder.HelloAjaxNet,WebApplication.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.DataEntity,WebApplication.ashx"></script>

為是什么呢為的是引用一段js文件 ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx

然后你就明白了噻這段客供你進(jìn)行客戶端js調(diào)用的腳本是服務(wù)端自動(dòng)生成的跟你服務(wù)端的名字一模一樣然后你就可以貌似像在客戶端回調(diào)服務(wù)端方法樣的沒(méi)什么神奇的，我們主要就是想利用他的這個(gè)特性和json化數(shù)據(jù)的方便之處來(lái)實(shí)現(xiàn)客戶端服務(wù)端數(shù)據(jù)的無(wú)縫傳遞。

關(guān)于json數(shù)據(jù)的序列化要是以前就只有利用外部json庫(kù) 或者微軟自帶的來(lái)進(jìn)行手動(dòng)解析：

服務(wù)端：

public string ServerProcerMethod(string stu)
     {
       //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);
 
       System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);
       if (s != null && s.Count > )
       {
         StuInfo stu= s[];
         StringBuilder sb = new StringBuilder();
         jsSerializer.Serialize(stu, sb);
         return sb.ToString();
       }
       else
         return null;
     }

客戶端：

//javascript 字符串轉(zhuǎn)json對(duì)象：
 var obj = JSON.parse(str);
 //javascript json 對(duì)象轉(zhuǎn)字符串：
 JSON.stringify(obj);

關(guān)于AjaxPro.2.dll 和ajax.dll的關(guān)系，網(wǎng)上說(shuō)他們不一樣其實(shí)壓根就是一個(gè)人搞的吧我擦。請(qǐng)?jiān)谏厦婢W(wǎng)站下載ajaxpro 這個(gè)才是完善的版本

引用dll文件后需要配置webconfig httphandler 作用就是讓上面的ashx請(qǐng)求轉(zhuǎn)到我們的 ajaxpro代碼，進(jìn)而讓我們的客戶端js直接調(diào)用服務(wù)端方法調(diào)用成功。

<system.webServer>
   <directoryBrowse enabled="true"/>
   <handlers>
    <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro."/>
    <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />-->
   </handlers>
  </system.webServer>

然后其他的我就不多說(shuō)了哈待會(huì)直接看服務(wù)端代碼。

easyui 你就可以理解為一堆擴(kuò)展了的控件。就像jquery一樣你把js對(duì)象原生的html控件用他的東西一包然后就可以點(diǎn)得出他一些為你寫好的方法幫助你方便的處理數(shù)據(jù)。并且還有默認(rèn)的還可以的控件外觀，這點(diǎn)對(duì)于做企業(yè)管理類軟件來(lái)說(shuō) 還是真心不錯(cuò)的，做其他的就只能呵呵了。下載easyui的文件放到項(xiàng)目中并引入easyui 相關(guān)js和樣式文件還有jquery：

<script type="text/javascript" src="../jquery-easyui-../jquery.min.js"> </script>
   <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/default/easyui.css" />
   <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/icon.css" />
   <script type="text/javascript" src="../jquery-easyui-../jquery.easyui.min.js"></script>

然后，然后你就可以使用easyui了就像easyui 首頁(yè) http://jeasyui.com/ 上介紹的那樣通過(guò)css樣式或者js代碼把原生html控件渲染成easyui控件

 <div class="easyui-dialog" style="width:px;height:px"
   data-options="
     title:'My Dialog',
     iconCls:'icon-ok',
     onOpen:function(){}">
   dialog content.
 </div>
 <input id="cc" style="width:px" />
 $('#cc').combobox({
   url: ...,
   required: true,
   valueField: 'id',
   textField: 'text'
 });

是的非常方便。其實(shí)國(guó)內(nèi)還有好些js寫的比較牛的弄了一些這樣ui 那樣ui 選來(lái)選去還是用這個(gè)吧。用的最多的需求就是ajax服務(wù)端分頁(yè) ，我們來(lái)弄個(gè)吧。

我們先說(shuō)下這個(gè)easyui的datagrid 打他狗日的，客戶端html放個(gè)table標(biāo)簽：<table id="studb"></table> 然后用js這么一搞 $('#studb').datagrid() 他就給你渲染成easyui datagrid控件了，你可以在document.ready()時(shí)做這個(gè)事情。我們的數(shù)據(jù)表格是需要填充數(shù)據(jù)的這些數(shù)據(jù)從哪來(lái) 顯示哪些列怎么分頁(yè) 每頁(yè)顯示多少條，這些都是參數(shù)，怎么傳進(jìn)去。easyui很多地方都接收json對(duì)象形式的一坨參數(shù) ，比如這個(gè)datagrid：

 function bindDataToTb() {
       var keywordStr = $('#keyword').val();
       $('#studb').datagrid(
       {
         queryParams: { keyword: keywordStr },
         //url:"WebForm.aspx/BindData",
         toolbar: '#searchBar',
         pagination: true,
         pageNumber: ,
        singleSelect: true,
        pageSize: ,
        pageList: [, , ],
        loader: function (param, success, error) {
          var da = WebApplication.NewFolder.HelloAjaxNet.BindData(param.keyword, param.page, param.rows)
          if (da.value.rows == null) {
            success();
          }
          else
            success(da.value);
        },
        pagePosition: 'bottom',
        columns: [[
          { field: 'stuNo', title: 'Id', width: },
          { field: 'name', title: '名字', width: },
          { field: 'age', title: '年齡', width: },
          { field: 'loginName', title: '登錄名', width: },
          { field: 'loginPwd', title: '密碼', width: },
          { field: 'GradId', title: '班級(jí)Id', width: },
          { field: 'gradName', title: '班級(jí)', width: },
          {
            field: 'none', title: '操作', width: , formatter: function (value, row, index) {
              var btn = '<a class="editcls" href="#" onclick="delstuClick(' + row.stuNo + ')">刪除</a>';
              return btn;
            }
          }
        ]]
      });
     }

具體看loader 和columns ，loader用于定義你以什么形式載入數(shù)據(jù) 定義了loader上面的url就沒(méi)有必要了。

我這里的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 自然也是服務(wù)端的方法用于檢索數(shù)據(jù)的。

關(guān)于這三個(gè)param.keyword, param.page, param.rows 是我們用于實(shí)現(xiàn)loader時(shí) easyui那種設(shè)計(jì)方式故意暴露給我們的參數(shù) 方便我們使用。

param.keyword 是我們上面定義的我們點(diǎn)搜索的時(shí)候需要往服務(wù)端傳一個(gè)查詢關(guān)鍵詞 queryParams: { keyword: keywordStr }

param.page 是easyui自己的參數(shù)表示當(dāng)前第幾頁(yè) param.rows表示每頁(yè)行數(shù)，每當(dāng)你點(diǎn)表格的上一頁(yè) 下一頁(yè) 的時(shí)候就會(huì)自動(dòng)往loader 發(fā)翻頁(yè)的參數(shù) 這個(gè)是自動(dòng)的。

然后就從服務(wù)端獲取數(shù)據(jù)填充表格，就是這么一個(gè)工作過(guò)程。還有colums 我就不說(shuō)了就是定義顯示哪些列和自定義列那個(gè)很容易看懂。

easyui控件有屬性方法，調(diào)用方法的形式總算像這樣：$('#studb').datagrid('reload') 這就相當(dāng)于調(diào)用了#studb這個(gè)表格控件的reload方法了然后數(shù)據(jù)就會(huì)自動(dòng)刷新，每個(gè)控件的具體見(jiàn)文檔。

服務(wù)端數(shù)據(jù)處理我們還是用entityframework 我一般都用codefirst的方式這東西跟他自己的mssql數(shù)據(jù)庫(kù) 結(jié)合的很好用起很方便。

服務(wù)端代碼：

//查詢（帶分頁(yè)
     [AjaxPro.AjaxMethod]
     public static WebApplication.DataEntity BindData(string keyword, int page, int rows)
     {
       //, ref int pageIndex, out int totalPage
       if (keyword == null)
         keyword = "";
       int pageIndex = ;
       int pageSize = ;
       int totalPage;
       if (page != )
         pageIndex = page;
       if (rows != )
         pageSize = rows;
       MyDb db = new MyDb();
       var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select new 
{ stuNo = studentInfo.stuNo, name = studentInfo.name, age = studentInfo.age, gradName = studentInfo.grad.gradName };
       //var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select studentInfo;
       totalPage = data.Count() % pageSize == ? data.Count() / pageSize : data.Count() / pageSize + ;
       if (pageIndex > totalPage)
         pageIndex = totalPage;
       else if (pageIndex < )
         pageIndex = ;
       //var dt = DataList<object>.Create(data.OrderBy(r => r.stuNo), new StudentsInfo(), pageIndex, pageSize).Value;
       object dt=null ;
       if(data.Count()>)
       dt= DataList<object>.Create(data.OrderBy(r => r.stuNo),
         new { stuNo = , name = "", age = , gradName = "" }, pageIndex, pageSize).Value;
       WebApplication.DataEntity result = new WebApplication.DataEntity();
       result.total = data.Count();
       result.rows = dt;
       return result;
     }

關(guān)于數(shù)據(jù)部分和EF linq 分頁(yè)那些我就不貼出來(lái)了完整示例下載里面有。走走看吧試試看吧完全無(wú)刷新服務(wù)端分頁(yè)，感覺(jué)棒棒噠

搜索那個(gè)我也不想說(shuō)了哈就是重新載入下數(shù)據(jù)而已，刪除是通過(guò)自定義列的方式傳id到j(luò)s函數(shù) 然后調(diào)用服務(wù)端刪除。然后要說(shuō)下錄入功能以及easyui自帶的表單驗(yàn)證也是相當(dāng)方便的。

新建一個(gè)div 作為彈出層里面有一個(gè)錄入信息的表格各種html控件只要寫上easyui對(duì)應(yīng)的樣式就自動(dòng)渲染了看彈出層的 class="easyui-dialog" data-options="closed:true,title:'新學(xué)生注冊(cè)',modal:true"

其實(shí)很簡(jiǎn)單噻看字面意思就明白了這些參數(shù) 都在easyui的文檔里有。驗(yàn)證也是在html元素上寫data-options 就可以了，：

<div id="addBox" class="easyui-dialog" data-options="closed:true,title:'新學(xué)生注冊(cè)',modal:true" style="width: px; height: px">
       <table class="auto-style">
         <tr>
           <td>學(xué)生姓名：</td>
           <td>
             <input id="stuname" class=" easyui-textbox" data-options="required:true,missingMessage:'必填項(xiàng)！',validType:'email',invalidMessage:'email格式不正確！'" type="text" /></td>
         </tr>
         <tr>
           <td>班級(jí)： </td>
           <td>
             <input class="easyui-combobox" id="grad" name="grad"
               data-options="valueField:'id',textField:'gradName',required:true,missingMessage:'必填項(xiàng)！'" /></td>
         </tr>
         <tr>
           <td>
             <input id="saveBtn" onclick="saveClick()" type="button" value="保存" /></td>
           <td>
             <input id="Button" type="button" onclick="$('#addBox').dialog('close');" value="關(guān)閉" /></td>
         </tr>
       </table>
     </div>

新建按鈕：

復(fù)制代碼代碼如下:

 <a id="Button1" onclick="$('#addBox').dialog('open');" class="easyui-linkbutton">加新的</a>

注意千萬(wàn)別用button 元素就是這種 <button>新加的</button> 這是個(gè)坑，折騰了好久。

保存按鈕調(diào)用的js函數(shù)：

 //保存信息
     function saveClick() {
       var isvaliok = $("#addBox").form('validate');//包起來(lái)的需要提交信息的那個(gè)div框的id
       if (isvaliok == false) {
         $.messager.show({ title: '提示', msg: '請(qǐng)完善不正確的項(xiàng)后再提交', showType: 'show' });
         return;
       }
       var stu = {};
       stu.name = $("#stuname").val();
       stu.age = ;
       stu.GradId = $("#grad").combobox('getValue');
       stu.gradName = $("#grad").combobox('getValue');
       if (isNaN(stu.GradId))
         stu.GradId = null;
       var rst = WebApplication.NewFolder.HelloAjaxNet.addStu(stu);
       if (rst.value == "ok") {
         $('#addBox').dialog('close');
         $('#studb').datagrid('reload');
         var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value;
         $('#grad').combobox({ data: gradData }).combobox('reload');
       }
       else {
         $.messager.show({ title: '提示', msg: rst.error.Message + rst.value, showType: 'show' });
       }
     }

注意到了噻：

 var isvaliok = $("#addBox").form('validate');//包起來(lái)的需要提交信息的那個(gè)div框的id
       if (isvaliok == false) {
         $.messager.show({ title: '提示', msg: '請(qǐng)完善不正確的項(xiàng)后再提交', showType: 'show' });
         return;
       }

在easyui里進(jìn)行驗(yàn)證很簡(jiǎn)單噻只要在html代碼里把驗(yàn)證格式定義好了，只需要傳入一個(gè)最外面容器控件的id $("#addBox").form('validate') 就自動(dòng)幫我們驗(yàn)證了。并且界面上還有提示焦點(diǎn)自動(dòng)放到第一個(gè)驗(yàn)證不通過(guò)的控件上去了完全不需要我們動(dòng)手。

當(dāng)然我們?cè)诳蛻舳?document.ready()的時(shí)候必須要綁定表格和下拉框的數(shù)據(jù)：

 $(function () {
       //頁(yè)面初始化
       //載入表格數(shù)據(jù)
       bindDataToTb();
       //載入班級(jí)下拉框
       var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value;
       $('#grad').combobox({ data: gradData }).combobox('reload');
       var fd = new FormData();
     });

服務(wù)端保存的代碼：

//添加
     [AjaxPro.AjaxMethod]
     public string addStu(StudentsInfo stu)
     {
       MyDb db = new MyDb();
       if(stu.GradId==null)
       {
         if (string.IsNullOrEmpty(stu.gradName) == false)
         {
           Grad grd = new Grad();
           grd.gradName = stu.gradName;
 
           Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName);
           if(grdOld!=null)
           {
             return "類別已存在";
           }
           else
           {
             db.grads.Add(grd);
             stu.grad = grd;
           }
         }
       }
       db.Students.Add(stu);
       db.SaveChanges();
       return "ok";
     }

服務(wù)端代碼如果我們沒(méi)有這個(gè)id的類別我們就認(rèn)為這個(gè)類別是新的，新加一個(gè)類別然后立即綁定 perfect 完美，棒棒噠

看上去是不是有模有樣。做管理類軟件還行。

這樣ui 那樣ui當(dāng)你需要自定義樣式的時(shí)候發(fā)現(xiàn)什么ui都是浮云，例如我說(shuō)的國(guó)內(nèi)的寫js比較牛的就已經(jīng)造出來(lái)很多ui了，表格是很漂亮很強(qiáng)大。其實(shí)很多功能你還是用不到你想改還很困難當(dāng)然我的js也是很菜的。當(dāng)你用到另一套u(yù)i 的時(shí)候又要熟悉它那一套。我只想用個(gè)簡(jiǎn)簡(jiǎn)單單的自定義分頁(yè)表格而已或者像asp.net里的服務(wù)器控件repeat 流式布局四個(gè)數(shù)據(jù)一行那種你怎么做。還是自己動(dòng)手吧。php里面有前端模板。

我這里只是簡(jiǎn)單從實(shí)際需求了解下angular的威力 php里面模板什么的都是浮云新建一個(gè)webform HelloAjaxNetAngular.aspx

注意這個(gè)例子服務(wù)端代碼我一律用上面的絲毫都不會(huì)變只是前端變了，angularjs 的主打思想是mvvm 模式就是wpf里面那種依賴屬性動(dòng)態(tài)綁定，不知道你們用過(guò)沒(méi) 反正我用過(guò) 感覺(jué)就一個(gè)字爽，做這種數(shù)據(jù)庫(kù)平臺(tái)程序 mfc winform 都是渣。

angularjs 的基礎(chǔ)我就不介紹了哈直接從需求入手做一個(gè)分頁(yè)表格加信息更新功能

angularjs的網(wǎng)站是 http://www.angularjs.org/ 這個(gè)網(wǎng)址在國(guó)內(nèi)也是訪問(wèn)不了的。一些相關(guān)的其他人的學(xué)習(xí)筆記有 http://www.angularjs.cn/ http://www.zouyesheng.com/angular.html

反正這兩個(gè)教程看了下對(duì)我沒(méi) 對(duì)我沒(méi)起到啥作用感覺(jué)跟嚼木渣樣的，angularjs的理念雖然是mvvm 但是angularjs本身還是感覺(jué)晦澀難懂。

我就在這樣一個(gè)半懂不懂的狀態(tài)下寫了這個(gè)例子，所有的操作幾乎都完全不需要向jquery那樣動(dòng)dom 。真心感覺(jué)到了他的強(qiáng)大。前端就一個(gè)controller函數(shù) 管整個(gè)頁(yè)面，怎么一個(gè)一個(gè)的分我也不明白只知道controller 跟html限定一樣的樹狀結(jié)構(gòu)。沒(méi)在范圍的html元素不能訪問(wèn)其controller里的變量。

我們來(lái)看這個(gè)controller 函數(shù) ，我寫的時(shí)候也沒(méi)什么感覺(jué) 。就是感覺(jué)很存粹就只感覺(jué)到兩個(gè)東西存在。業(yè)務(wù)邏輯在操作數(shù)據(jù)。就像在寫c#數(shù)據(jù)操作代碼樣：

 function myCtr($scope) {
       var mod = [{ name: 'xiang', age: }, { name: 'xiang', age: }, { name: 'xiang', age: }];
       $scope.data = mod;
       $scope.curobj = {};
       $scope.pageEntity = { total: , rows: , page: , pgmsg: '' }
       //初始化默認(rèn)第一頁(yè)
       $scope.initPage = function () {
         var firstPage = WebApplication.NewFolder.HelloAjaxNetAngular.BindData($("#txtkeyword").val(), $scope.pageEntity.page, $scope.pageEntity.rows);
         $scope.data = firstPage.value.rows;
         var pageEntityMod = {};
         pageEntityMod.total = firstPage.value.total;
         pageEntityMod.rows = $scope.pageEntity.rows;
         pageEntityMod.page = $scope.pageEntity.page;
         var totalpage = pageEntityMod.total % pageEntityMod.rows == ?
           parseInt(pageEntityMod.total / pageEntityMod.rows) :
           parseInt(pageEntityMod.total / pageEntityMod.rows) + ;
         pageEntityMod.pgmsg = "共 " + pageEntityMod.total + "條記錄 每頁(yè) " + pageEntityMod.rows
           + "條，共 " + totalpage + "頁(yè) ，當(dāng)前第 " + pageEntityMod.page + "頁(yè)";
         $scope.pageEntity = pageEntityMod;
         $scope.curobj = {};
       }
       //更新當(dāng)前 選定的
       $scope.modifyCur = function () {
         var rst = WebApplication.NewFolder.HelloAjaxNetAngular.updateStu($scope.curobj)
         //刷新表格 當(dāng)前選中信息 復(fù)原
         $scope.initPage();
         alert(rst.value);
       }
       //下翻頁(yè)
       $scope.nextPage = function () {
         var totalpage = $scope.pageEntity.total % $scope.pageEntity.rows == ?
           parseInt($scope.pageEntity.total / $scope.pageEntity.rows) :
           parseInt($scope.pageEntity.total / $scope.pageEntity.rows) + ;
         var pagenewnum = $scope.pageEntity.page + ;
         if (pagenewnum <= totalpage)
           $scope.pageEntity.page += ;
         $scope.initPage();
       }
       //上翻頁(yè)
       $scope.previousPage = function () {
         var pagenewnum = $scope.pageEntity.page - ;
         if (pagenewnum >= )
           $scope.pageEntity.page -= ;
         $scope.initPage();
       }
       //搜索
       $scope.search = function () {
       }
       //選中一行
       $scope.del = function (sender, curobj) {
         //所有行的顏色還原//設(shè)置選中那一行的顏色
         var rows = $(sender.target).parent().parent().parent().find("tbody").find("tr");
         for (var i = ; i < rows.length; i++) {
           $(rows[i]).css("background", "white");
         }
         $(sender.target).parent().css("background", "#ffed");
         $scope.curobj = curobj;
       }
       //首次先調(diào)用下 以獲取第一頁(yè)
       $scope.initPage();
     }

界面部分：

<div ng-controller="myCtr" id="mygrid">
         <input id="txtkeyword" type="text" /><input ng-click="initPage()" type="button" value="搜索" />
         <br />
         <br />
         <div style="height: px">
           <table cellspacing="" border="" class="gridtable">
             <thead>
               <th width="px">name</th>
               <th width="px">age</th>
             </thead>
             <tbody ng-repeat="stu in data">
               <tr ng-click='del($event,stu)' style="background-color: white">
                 <td>{{stu.name}}</td>
                 <td>{{stu.age}}</td>
               </tr>
             </tbody>
           </table>
 
         </div>
         <div id="pager">
           <a href="#" ng-click="previousPage()">上一頁(yè)</a> <a href="#" ng-click="nextPage()">下一頁(yè)</a>
           <span>{{pageEntity.pgmsg}}</span>
         </div>
 
         <div>
           姓名：<input type="text" value="{{curobj.name}}" ng-model="curobj.name" /><br />
           年齡：<input type="text" value="{{curobj.age}}" ng-model="curobj.age" />
           <input id="Button" type="button" ng-click="modifyCur()" value="更改" />
         </div>
       </div>

看到我自己搞了一個(gè)數(shù)據(jù)綁定函數(shù) 參照easyui里datagrid的loader。第一次請(qǐng)求得到分頁(yè)信息后我立即把數(shù)據(jù)綁定到表格你可以看到完全就像做模板樣的，然后初始化自己的分頁(yè)控件。在ng-click 的時(shí)候像原來(lái)一樣觸發(fā)客戶端單擊然后調(diào)用controller里的方法去更新數(shù)據(jù) ，注意僅僅是根據(jù)業(yè)務(wù)邏輯去更新數(shù)據(jù) 其他的不需要做。關(guān)于上面兩段代碼不明白的自行去看angularjs 入門和數(shù)據(jù)綁定用不了10分鐘，

由于有wpf那種雙向綁定機(jī)制，數(shù)據(jù)模型數(shù)據(jù)更新了頁(yè)面內(nèi)容自動(dòng)跟著變。甚至你可以看到我編輯下面文本框里的數(shù)據(jù)的時(shí)候都還沒(méi)提交上面表格的數(shù)據(jù)就跟著變因?yàn)樗麄兊臄?shù)據(jù)是從同一個(gè)地方來(lái)的，看著恍惚都感覺(jué)是ajax哈。

上面所有示例的項(xiàng)目源碼下載可直接運(yùn)行，由于引了些外部庫(kù)進(jìn)來(lái)十兆差點(diǎn)放不下

說(shuō)點(diǎn)后話

其實(shí)照互聯(lián)網(wǎng)這樣推動(dòng)發(fā)展下去的話前端會(huì)統(tǒng)一前端才是王道到時(shí)候一個(gè)網(wǎng)頁(yè) 就是一個(gè)系統(tǒng) 一個(gè)客戶端。后端只負(fù)責(zé)數(shù)據(jù)和安全。現(xiàn)在的什么html5不是幾乎都成為工業(yè)標(biāo)準(zhǔn)了么有些嵌入式設(shè)備都支持

暫時(shí)像博客園里我看到的有幾個(gè)講的前后端天人合一的那種mvc模式前端后端操作同一個(gè)model 前端更新屬性了有一種機(jī)制自動(dòng)就更新到后端持久化到數(shù)據(jù)庫(kù)去了或者后端更新model的某個(gè)屬性前端html頁(yè)面的值自動(dòng)就變了。不是說(shuō)做不到畢竟牛人這么多，我覺(jué)得至少還不穩(wěn)定吧。

各種ui有easyui ligerui fineui miniui Devexpress 還有很多js框架 seajs requirejs JavaScriptMVC backbone avalonjs knockout angular jquery jqueryui js真是屎一樣的東西啊各種框架學(xué)都學(xué)不完

尤其是軟件行業(yè)日新月異基于框架和平臺(tái)的技術(shù)太多了不精通某樣技術(shù)沒(méi)關(guān)系能使用就行，但是作為一個(gè)技術(shù)人員你至少得精通一樣或者一門技術(shù) 要不然就是個(gè)搬磚的很遺憾我基本還在搬磚的路上。寫業(yè)務(wù)代碼就是用一年的經(jīng)驗(yàn)混十年，寫業(yè)務(wù)代碼是他的工作工作之余還得有點(diǎn)精神追究研究下事情的本質(zhì) ，只要是還不錯(cuò)的程序員做這種數(shù)據(jù)庫(kù)系統(tǒng)久了都會(huì)自己搞點(diǎn)能快速開(kāi)發(fā)的所謂的小框架積累一些自己的工具庫(kù) 和經(jīng)驗(yàn)。

在工作上不要有什么偏見(jiàn) 只要他每天把業(yè)務(wù)代碼寫的出來(lái) 軟件開(kāi)發(fā)也只是一門職業(yè) 你不是英雄，目的是解決問(wèn)題不是轉(zhuǎn)牛角尖。

我本人對(duì)js是不怎么感冒的 js也很爛，當(dāng)初設(shè)計(jì)這個(gè)東西的時(shí)候就不完善給我們使用它造成了各種阻礙，但是你做web開(kāi)發(fā)又不得不用它。這里也并不是對(duì)做前端的有什么偏見(jiàn) 感謝那些前端吃的很透的人像司徒正美那些高手制造了這些工具讓我們更容易的去完成這些網(wǎng)站程序。

您可能感興趣的文章: