一.angularJs——服务调用与后台数据获取

最近的项目中需要用到angularJs，买了本书网上参考了些例子，先把项目跑起来，慢慢在研究框架里面的原理…

1.1、factory

可以用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应用》