初识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

谈谈我个人使用的感受吧：最大的区别是对开发流程的影响，以往我想做一个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 style="margin-top:-15px"><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引用也会随之改变。