AngularJS~集成的ajax和服务的注入-CFANZ编程社区

AngularJS很美，以至于迷倒了不少年青人和我这位大叔，它的美不仅仅是在写法上，而且在设计方法上都进乎于完美，用什么服务就注入什么服务，这样方法本来就很直观，程序员感觉直观了，程序在运行起来也按需要装载，这种按需要装载无论在性能上还是在表现力上都远远优于完全加载方式。

Ajax加载数据

$http服务提供了一组ajax的方法，加载数据，Get,Post都有支持，而$http服务在angular里就是被动态装载的，在面向对象里叫做DI或者IOC

'todoApp', []).controller('RealDataController', function ($http, $scope) {
            var self = this;
            $http.get('/SOA/GetMenus').success(function (data) {
                self.dataList = data;
            }).error(function (data, status, headers, config) { });

上面是一种装载$http服务，并使用http服务的一种方法，而下面这种是通过别名的方法使用它，代码更加精简

'todoApp',[]).controller('RealDataController2', ["$http", "$scope", function ($h, $s) {
            var self = this;
            $h.get('/SOA/GetMenus').success(function (data) {
                self.dataList = data;
            }).error(function (data, status, headers, config) { });
        }]);

通过上面的程序我们就可以把数据绑定到HTML元素上了

<div ng-controller="RealDataController as real">
        <ul>
            <li ng-repeat="item in real.dataList">
                <span>{{item.MenuID}}</span>
                <span>{{item.MenuName}}</span>
                <span>{{item.UpdateDate | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
                <span><a href="javascript:void(0)" ng-click="real.edit()">编辑</a></span>|
                <span><a href="javascript:void(0)" ng-click="real.del(item)">删除</a></span>
            </li>
        </ul>
    </div>

结果如下

AngularJS~集成的ajax和服务的注入_ajax

值得注意的是对于“删除”操作，本例也做了实现，它分为两方面，一个前台用户体验显示，二是后台数据删除，前台使用angular的双向绑定技术，将数组对象的元素删除，后台通过$http.post调用对应的api进行真实数据的删除即可，代码如下

//删除
            self.del = function (o) {
                self.dataList.splice(self.dataList.indexOf(o), 1);
                //AJAX请求后台Api清除真实数据
                $http.post("/SOA/DelMenu?id=" + o.MenuID);
            }

在使用angular几天后，感觉它与knockoutjs有些类似的地方，当然，它在功能上即加强大，这是毋庸置疑的！

作者：仓储大叔，张占岭，
荣誉：微软MVP