AngularJSAngularJS~集成的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>

结果如下

AngularJS 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有些接近之地方,当然,它当效能上虽加强深,这是不要置疑的!

相关文章