你的位置:首页 > Java教程

[Java教程]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">        <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>

结果如下