angularJs-服务调用与后台数据获取

可以用factory做一些后台数据的获取，例如

happyFarm.factory('seedList',['$http',function($http){
    return {
        getData: function(memberId) {
              return $http.get(baseUrl+'/depotCtrl/getSeedList?memberId='+memberId);
        }
    }
}])

其中，“seedList”是模块名称，“$http”调用了angularJs内置的http服务(后续会谈到)，getData是在该服务中自定义的一个方法，方法会返回一个从后台得到的数据，当控制器调用该服务时，可直接使用seedList.getData(memberId)获取数据。

这里，“seedList”可以看做一个自定义服务，而“$http”则是angularJs的内置服务。

• $http服务的两种用法 
  1.angularJs内置的$http服务，类似于jQuery的$ajax，用于向服务器请求/提交数据，例如 
$http({ 
    method :'POST', 
    url : 'http://localhost:8080/shopCtrl/buyCrop', 
    params: { 
        userId:'1',//memberId 
        cropId:$scope.cropDetail.cropId, 
        buyNum:$scope.cropDetail.quantity, 
        coin:$scope.cropDetail.totalCoin 
    } 
}).success(function(data,status,headers,config) { 
      alert("success!") 
}).error(function(data,status,headers,config){ 
      alert(status) 
}); 

  2.angularJs中的$http服务还提供了一些快捷方法，例如上例中的: 
  $http.get(baseUrl+'/depotCtrl/getSeedList?memberId='+memberId); 
  由于$http是异步处理，故采用这种方式来请求/提交数据，则在调用时需要用then()。

1.2、controller

controller是angularJs中负责处理业务，例如调用哪项服务，获取哪些数据，对数据进行操作等。

happyFarm.controller("bagController",["$scope","$http",'$routeParams','seedList',
    function($scope,$http,$routeParams,seedList){
        seedList.getData(1).then(function(res){ //memberId
            $scope.bagItems=res.data
    });

}]);

上文为controller.js中的一部分代码，bagController调用了seedList服务，并用该服务中的getData()方法从服务器后台获取数据，用then中的方法将数据res.data赋值给作用域中的bagitems集合,即可在模板页面用遍历bagItems的方式获取单个数据

需要注意的是，在调用服务时，应将angularJs内置服务写在前面，自定义服务(推荐自定义服务名称不要带$以区分)写在后面

• 在项目中，可能会遇到controller之间数据互相调用的情况，即controller间的通讯，可以使用一下几种方式： 
  1.父控制器的作用域包含子作用域的全部，故子控制器可以直接调用父控制器中的数据；

  2.作用域间的通讯可以通过service来完成，即，获取数据的操作另写一个服务，A，B控制器均可通过调用这个服务来完成数据的获取；

  3.利用 $on, $emit，$broadcast在作用域之间进行交互(后续将补全)

1.3、模板

模板实际上是视图的一个组成部分，即可以是一个html片段。笔者当前项目中遇到两种不同的展现形式：

• html中直接定义模块的controller，一般在最外层页面：

  index.html：

  <ul class="soil_main"  ng-controller="cropListCotroller">
      <li class="soil"  ng-repeat="cropItem in cropItems" >
          <div id="{{cropItem.soilId}}" ng-controller="interactController"  ng-click="interact()">
              <input id="soilId" type="hidden" value="{{cropItem.soilId}}">
          </div>
      </li>
  </ul>

• a.在上文html片段中，用ng-controller定义了这个DOM节点将会被哪个controller控制；
  b.ng-repeat会将cropItems集合中的每一个元素遍历，并向下复制“cropItems.length”个li标签用来展示cropItems数组中的每一个对象

• 与路由绑定的模板

  index.html:

  <div ng-view></div>

• bag.html:

  <p class="divs" ng-repeat="bagItem in bagItems">
      <a class="divs_a" ng-click="chooseSeed(bagItem.cropId)">
          <img src="{{bagItem.cropBasic.cropIcoSrc}}">
      </a>
      <i class="divs_num">{{bagItem.storeNumber}}</i>
  </p>

• happyFarm.js:

  $routeProvider.when('/bag',{
      templateUrl: 'tmpl/bag.html',
      controller: 'bagController'
  }).otherwise({
      redirectTo: '/'
  })

• a.最外层页面有一个定义为ng-view的div元素，作为路由模板的容器； 
  b.用angular的$route服务来创建一个配置块(即happyFarm.js中的内容)承载需要的参数 
  c.当URL变成/bag时，angularJs将会加载tmpl下的bag.html到页面，同时，bag.html会从根元素开始被bagController管理。

参考书目 ： 《用AngularJs开发下一代Web应用》