角度服務與控制器同步工作

Question

我對AngularJS相當陌生，剛開始掌握很多我特別喜歡MVC設計模式的概念。但是我在我的應用程序中實現服務層時很困難。

我發現的是，在我的Controller調用服務中的一個方法後，它會在服務返回數據之前繼續執行代碼;這樣在服務返回數據時，它對控制器沒有任何用處。

爲了讓我在說什麼的一個更好的例子，這裏是代碼：

var InsightApp = angular.module('InsightApp', ['chart.js']); 

// Module declaration with factory containing the service 
InsightApp.factory("DataService", function ($http) { 
return { 
    GetChartSelections: function() { 
      return $http.get('Home/GetSalesData') 
       .then(function (result) { 
       return result.data; 
      }); 
     } 
    }; 
}); 

InsightApp.controller("ChartSelectionController", GetAvailableCharts); 

// 2nd Controller calls the Service 
InsightApp.controller("DataController", function($scope, $http, DataService){ 
var response = DataService.GetChartSelections(); 

// This method is executed before the service returns the data 
function workWithData(response){ 
    // Do Something with Data 
    } 
} 

所有的例子我發現似乎可以構成爲，我這裏還是有些輕微的變化;所以我不確定我應該如何確保異步執行。

在Javascript世界中，我將服務移動到Controller內部以確保它執行異步;但我不知道如何在Angular中實現這一點。而且，無論如何，反角度注入都是不利的。

那麼這樣做的正確方法是什麼？

Answer 1

http返回一個承諾而不是數據，所以在你的工廠你返回$ http的承諾，並可以像使用承諾那樣使用它，catch，finally方法。

看到：http://blog.ninja-squad.com/2015/05/28/angularjs-promises/

InsightApp.controller("DataController", function($scope, $http, DataService){ 

var response = DataService.GetChartSelections() 
    .then(function(res) { 
     // execute when you have the data 
    }) 
    .catch(function(err) { 
     // execute if you have an error in your http call 
    }); 

EDIT通PARAMS建模服務：

InsightApp.factory("DataService", function ($http) { 
return { 
    GetChartSelections: function (yourParameter) { 
      console.log(yourParameter); 
      return $http.get('Home/GetSalesData') 
       .then(function (result) { 
       return result.data; 
      }); 
     } 
    }; 
}); 

然後：

InsightApp.controller("DataController", function($scope, $http, DataService){ 

var response = DataService.GetChartSelections('only pie one') 
    .then(function(res) { 
     // execute when you have the data 
    }) 
    .catch(function(err) { 
     // execute if you have an error in your http call 
    }); 

Answer 2

返回承諾到控制器，不解決它在出廠

var InsightApp = angular.module('InsightApp', ['chart.js']); 

    // Module declaration with factory containing the service 
    InsightApp.factory("DataService", function ($http) { 
    return { 
     GetChartSelections: function() { 
       return $http.get('Home/GetSalesData'); 
      } 
     }; 
    }); 

在控制器中，

var successCallBk =function (response){ 
    // Do Something with Data 
}; 
var errorCallBK =function (response){ 
    // Error Module 
}; 

var response = DataService.GetChartSelections().then(successCallBk,errorCallBK); 

Answer 3

你應該這樣進行：

DataService.GetChartSelections().then(function (data) { 
    workWithData(data); 
} 

其實$ http.get返回一個Promise。你可以調用方法來處理你的Promise的成功或失敗

Answer 4

豈不是這樣的，當你的$ HTTP返回一個承諾或你通過回調。

隨着通過callback作爲param。

InsightApp.factory("DataService", function ($http) { 
return { 
    GetChartSelections: function (workWithData) { 
      return $http.get('Home/GetSalesData') 
       .then(function (result) { 
       workWithData(result.data); 
      }); 
     } 
    }; 
}); 

控制器代碼：

InsightApp.controller("DataController", function($scope, $http, DataService){ 
var response = DataService.GetChartSelections(workWithData); 

// This method is executed before the service returns the data 
function workWithData(response){ 
    // Do Something with Data 
    } 
} 

或者使用則或成功：

var response = DataService.GetChartSelections().then(function(res){ 
     //you have your response here... which you can pass to workWithData 
});