首页 / 操作系统 / 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.htmAngularJS 之 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（" ","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引用也会随之改变。更多详情见请继续阅读下一页的精彩内容： http://www.linuxidc.com/Linux/2014-05/102182p2.htm