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

AngularJS极美,以至于迷倒了俯拾就是年青人和自笔者那位小叔,它的美不仅仅是在写法上,而且在安插方法上都进乎于健全,用哪些服务就注入什么服务,这样方法自然就很直观,程序员感觉直观了,程序在运行起来也按须要装载,那种按须求装载无论在性质上只怕在表现力上都远远优于完全加载方式。

Ajax加载数据

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

       angular.module('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服务的一种办法,而下边那种是经过别名的措施应用它,代码越发简洁

     angular.module('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">
                {{item.MenuID}}
                {{item.MenuName}}
                {{item.UpdateDate | date:'yyyy-MM-dd HH:mm:ss Z'}}
                <a href="javascript:void(0)" ng-click="real.edit()">编辑</a>|
                <a href="javascript:void(0)" ng-click="real.del(item)">删除</a>
            </li>
        </ul>
    </div>

结果如下

图片 1

值得注意的是对此“删除”操作,本例也做了贯彻,它分成两地点,二个前台用户体验呈现,二是后台数据删除,前台使用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有些接近的地点,当然,它在职能上即抓牢大,那是不要置疑的!

相关文章