还是同一个项目,在项目中,发现多个controller之内有一个共同的服务器请求,当时只是不断的重复使用,如今,现在项目结束,代码开始走向了优化迭代的阶段;
首先,我的思路是把这个共同的请求,从controller里抽出来,做成一个服务,然后在需要的controller里注入;
第一个问题是请求服务器数据:
var app = angular.module('testApp',['ui.bootstrap']); app.factory('myService',['$http','$q',function($http,$q){ return { query : function() { var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行 $http({method: 'GET', url: 'data.php'}).success(function(data, status, headers, config) { deferred.resolve(data); // 声明执行成功,即http请求数据成功,可以返回数据了 }).error(function(data, status, headers, config) { deferred.reject(data); // 声明执行失败,即服务器返回错误 }); return deferred.promise; // 返回承诺,这里并不是最终数据,而是访问最终数据的API }, // end query title : '页面标题设置' }; }]);
至于promise,这里我简单的说,他是一个对象,也是一种异步编程模式,要了解详细,请到这里js 异步编程。
服务创建之后,把服务创建到controller里,调用就可以跑起来了。
app.controller('myController',function($scope,myService){ var use = myService.query(); //调用服务里的query函数 use.then(function(data){//then是回调函数,里面可以写user.then(successFun(),errFun()); $scope.version = data;//data 是promise的返回数据 }); setTimeout(function(){ console.log($scope.version); },1); var tit = myService.title; $scope.title = tit; });
这个是使用factory创建的服务,创建服务还有其他方式:service()、provider()等;
这个例子是关于服务里中包含服务器交互的一个方法,需要的小伙伴可以参考;
注意:服务里不能注入$scope这个对象;