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承诺，并且可以像使用then，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返回一个promise或你传递一个回调时。

将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
});

Angular Service与Controller同步工作

4 个答案: