⼀.angularJs——服务调⽤与后台数据获取
最近的项⽬中需要⽤到angularJs，买了本书⽹上参考了些例⼦，先把项⽬跑起来，慢慢在研究框架⾥⾯的原理…
1.1、factory
可以⽤factory做⼀些后台数据的获取，例如
happyFarm.factory('seedList',['$http',function($http){
return {
getData: function(memberId) {
return  $(baseUrl+'/depotCtrl/getSeedList?memberId='+memberId);
}
}
}])
其中，“seedList”是模块名称，“$http”调⽤了angularJs内置的http服务(后续会谈到)，getData是在该服务中⾃定义的⼀个⽅法，⽅法会返回⼀个从后台得到的数据，当控制器调⽤该服务时，可直接使⽤Data(memberId)获取数据。
这⾥，“seedList”可以看做⼀个⾃定义服务，⽽“$http”则是angularJs的内置服务。
$http服务的两种⽤法
1.angularJs内置的$http服务，类似于jQuery的$ajax，⽤于向服务器请求/提交数据，例如
$http({
method :'POST',
url : 'localhost:8080/shopCtrl/buyCrop',
params: {
userId:'1',//memberId
cropId:$pId,
buyNum:$pDetail.quantity,
coin:$alCoin
}
}).success(function(data,status,headers,config) {
alert("success!")
}).error(function(data,status,headers,config){
alert(status)
});
2.angularJs中的$http服务还提供了⼀些快捷⽅法，例如上例中的:
$(baseUrl+'/depotCtrl/getSeedList?memberId='+memberId);
由于$http是异步处理，故采⽤这种⽅式来请求/提交数据，则在调⽤时需要⽤then()。
1.2、controller
controller是angularJs中负责处理业务，例如调⽤哪项服务，获取哪些数据，对数据进⾏操作等。
angular和angularjs
function($scope,$http,$routeParams,seedList){
$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控制；
<-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="pId)">
<img src="{{pIcoSrc}}">
</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应⽤》

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。