歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

初識AngularJS

在使用了AngularJS重構團隊內部的平台之後,一直想總結點什麼,這裡先說說學習和使用AngularJS的感受。AngularJS是一款開源的JavaScript MV*(MVW、MVVM、MVC)框架,目前由Google維護。AngularJS彌補了HTML在構建應用方面的不足,其通過使用標識符(directives)結構,來擴展Web應用中的HTML詞匯,使開發者可以使用HTML來聲明動態內容,從而使得Web開發和測試工作變得更加容易。

AngularJS的創始人Misko是這樣來描述框架誕生的歷史的:AngularJS最初是作為一個編外項目(side project),當時我想去看看是否有可能讓Web設計師(非開發者)只使用HTML標簽來創建簡單的應用程序。隨著時間的推移,AngularJS演變成了一個全面的開發框架。AngularJS的設計理念是:構建UI應該是聲明式的,這樣的靈感來自於Misko在Adobe公司從事Flex方面工作的時候。

帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

談談我個人使用的感受吧:最大的區別是對開發流程的影響,以往我想做一個Web應用,會先用純Html構造原型,所有的數據均是假數據,靜態的寫到Html文件中,然後不斷的調試CSS樣式。待頁面整體的展示讓我滿意之後,就開始Js與服務器的交互開發,並初步把頁面的假數據替換掉,綁定成Js調用Ajax的返回。然而在使用到Table / List等數據加載的時候,我通常會在Js中來構造這些Dom元素。隨著應用的龐大和復雜,我發現我在Js中構造了大量的Dom元素,下面是一個例子:

function buildPersonHtml(data){
    var html = [];
    data = data[0];
    for(var id in data){
        var count = 0;
        if(data[id].length==0)
            continue;
        html[html.length] = '<div class="person alert alert-success">';
        html[html.length] = '<span><i class="icon-user"></i>&nbsp;'+id+' 的任務列表:</span>';
        html[html.length] = '<table class="table table-bordered">';
        html[html.length] = '<thead><tr><th>時間</th><th>功能點</th><th>詳細情況</th><th>完成進度</th><th>耗時</th><th>備注</th>';
        html[html.length] = '</tr></thead><tbody>';
        orderSubTask(data[id]);
        for(var i=0; i<data[id].length;i++){
            var subtask = data[id][i];
            if(subtask.progress != '100%')
                count ++;
            html[html.length] = '<tr>';
            if(subtask.status=='end')
                html[html.length] = '<td>開始: '+betterDate(subtask.createTime)+'<br/>結束: '+betterDate(subtask.endTime)+'</td>';
            else
                html[html.length] = '<td>開始: '+betterDate(subtask.createTime)+'</td>';
            html[html.length] = '<td>'+subtask.name+'</td>';
            html[html.length] = '<td>'+subtask.content.replace(new RegExp('\n','g'),'<br/>')+'</td>';
            html[html.length] = '<td>'+subtask.progress+'</td>';
            html[html.length] = '<td>'+subtask.time+'</td>';
            html[html.length] = '<td>'+subtask.note+'</td>';
            html[html.length] = '</tr>';
        }
        html[html.length] = '</tbody></table>';
        html[html.length] = '<span ><i class="icon-tasks"></i>&nbsp;已完成任務:'+ (data[id].length-count)+
            '&nbsp;&nbsp;&nbsp;<i class="icon-tasks"></i>&nbsp;當前任務數:'+count+'</span>';
        html[html.length] = '</div>';
    }
    return html.join('');
}

隨著我構造這些Dom元素的Js代碼越來越多,我的原型Html頁面的內容也就越來越少,少到最後很可能就只有一個header一個footer和一個空的div而已,其他所有內容,都是Ajax從服務器讀取,拿到Json對象的返回之後,才開始構建Dom加載。

接下來,在使用AngularJS重構的時候,我發現頁面的原型設計好之後,基本上不需要做什麼改變,即所有的Dom元素,頁面上該看到的東西,都在你的Html中聲明出來了。僅僅看Html文件,任何人都能知道這個頁面大概有哪些元素(表單、表格等各種UI控件),然後AngularJS用ng-model的方式讓你把這些Dom元素和數據進行了一種雙向綁定,即把你的數據(Data Model)聲明到頁面中。(我覺得這一步完全有可能由Web設計師來完成)下面的代碼片段是一個例子:

<table class="table table-bordered table-hover" ng-controller="MachineCtrl">
                      <tr>
                          <th ng-click="machineKey = 'host'; reverse = !reverse" class="order-th">主機名</th>
                          <th ng-click="machineKey = 'address'; reverse = !reverse" class="order-th">IP地址</th>
                          <th>配置</th>
                          <th>賬號</th><th>OS</th>
                          <th>軟件</th>
                          <th>備注</th>
                          <th ng-click="machineKey = 'owner'; reverse = !reverse" class="order-th">使用者</th>
                          <th>操作</th>
                      </tr>
                      <tr ng-repeat="machine in machines | filter:query | orderBy:machineKey:reverse">
                        <td class="nowrap">{{machine.host}}</td>
                        <td class="nowrap">{{machine.address}}</td>
                        <td>{{machine.hardware}}</td>
                        <td>{{machine.name}} / {{machine.password}}</td>
                        <td>{{machine.os}}</td>
                        <td>{{machine.env}}</td>
                        <td>{{machine.note}}</td>
                        <td class="nowrap machine-owner" id="{{machine._id}}_owner">
                            <span>{{machine.owner}}</span>
                            <input type="text" class="form-control owner-input" ng-keydown="bookMachine($event, machine._id)"/>
                            <a class="owner-btn" ng-click="toggleOfflineBook(offline._id)"><i class="fa fa-times fg-lg"></i></a>
                        </td>
                        <td class="nowrap" ng-class="machine.status=='maintenance'?'disable':'enable'">
                            <span ng-click="maintainMachine(machine._id)"><i class="fa fa-cog fa-spin fa-lg"></i> 維護中...</span>
                            <a title="訂閱" ng-click="toggleMachineBook(machine._id)"><i class="fa fa-pencil"></i></a>&nbsp;
                            <a title="維護" ng-click="maintainMachine(machine._id)"><i class="fa fa-wrench"></i></a>&nbsp;
                            <a title="編輯" ng-click="editMachine(machine._id)"><i class="fa fa-edit"></i></a>&nbsp;
                            <a title="刪除" ng-click="deleteMachine(machine._id)"><i class="fa fa-trash-o"></i></a>&nbsp;   
                          </td>
                        </tr>
                </table>

可以看到我把一個table與叫machines的data model做了一個雙向綁定,而實際上machines就是一個Json數組而已,���你用Js從服務端取到數據,填充了叫machines的Json數組之後,這個table就會自動更新出來,每一行展示一個machine,每一個單元格展示machine上的某個屬性。所謂的雙向綁定,即一方產生變化的時候,另外一方就會同步更新。所以如果我在Js文件中操作改變了這個machines數組對象,例如刪除了其中一個元素那麼頁面table就會自動減少一行,更新了一個元素的屬性值,table也會自動更新。就感覺像頁面的聲明model是Js中Json對象的引用一樣,當Json對象發生任何變化,頁面的model引用也會隨之改變。

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-05/102182p2.htm

Copyright © Linux教程網 All Rights Reserved