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