AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)_service 和promise

return true; }, // fail function function(data) { $ionicLoading.show({ template: "查询广告失败,请检查您的网络连接" });$ timeout(function() { $ionicLoading.hide(); }, 1200); return false; }); } catch (error) {$ scope.showAlert1("call:" + error.message); return false; }


 


整理后的代码如下:


路由:

.state('tab.find_med', { url: "/find_med", views: { 'tab-find_med': { templateUrl: "find_medicine.html", controller: 'find_med_contrller', resolve:{ adpic:function(){ var data = {}; appCallServer( $http, "9101", data, //success function function(data) { console.log("9101_resolve:" + JSON.stringify(data.data)); var adpic = new Array; for (var i = 0; i < data.data.length; i++) { adpic[i] = data.data[i].url; } return adpic; }, // fail function function(data) {$ ionicLoading.show({ template: "查询广告失败,请检查您的网络连接" }); $timeout(function() {$ ionicLoading.hide(); }, 1200); return false; }); } } } } })


 


控制器:

$scope.getadpic = function() {$ scope.adpic = adpic; }; $scope.getadpic();


 


执行程序，查看效果,提示如下错误:


 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/32d80d651cdd4b1fbf9cb0e2c7c4bec5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771410531&x-signature=rqR0mvip7PDVPZuRVr9ujJIqEg0%3D)


unpr全称是Unknown Provider,也就是说没有找到注入的东西。


找了半天忽然醒悟了，resolve中的对象只有在相应的控制器中才可以获取到，而自己之前是在别的控制器中添加的resolve对象，难怪总是报服务未注入的错误呢。正确的代码如下:


路由:

$stateProvider .state('tab', { url: "/tab", templateUrl: "tabs.html", controller: 'tabsCtrl', resolve:{ adpic:function(){ return "www"; } } })


 


控制器:


myCtrl.controller('tabsCtrl', function($scope, $rootScope, $http, $location,... $timeout, adpic) {


...


$scope.getadpic = function() {


console.log("adpic.........." + adpic);


};


 


$scope.getadpic();


}


所以一定要掌握原理。不要茫然。


添加以上代码后，HBuilder报如下错误:


 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9a4896301cf641d692bea0bf6748327d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771410531&x-signature=LFfQ0N2Lqv54ZsUjBD51DxKpRvQ%3D)


通过参考网络文献，优化后的代码如下:

// 利用Factory单例特性创建服务 myModule.factory('myAdpicService',function( $http,$ q){

return { getAdpic: function() { var d = $q.defer(); var data = {}; appCallServer($ http, "9101", data, //success function function(data) { console.log("9101_resolve:" + JSON.stringify(data.data)); var adpic = new Array; for (var i = 0; i < data.data.length; i++) { adpic[i] = data.data[i].url; } console.log("adpic___________:" + adpic); d.resolve(adpic); }, // fail function function(data) { $ionicLoading.show({ template: "查询广告失败,请检查您的网络连接" });$ timeout(function() { $ionicLoading.hide(); }, 1200); d.reject(data); }); return d.promise; } } });