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