Question

我是一名初学者，正在研究食谱搜索应用程序，该应用程序根据用户放入搜索栏的成分返回食谱列表。我正在学习使用Angular，因为它很方便，使我的代码更易于管理。

到目前为止，我已成功向我的数据库的API发出jQuery Ajax GET请求，并返回了返回的JSON对象列表。

这是我的Angular控制器声明：

    var recipesData = []; // variable that will hold the returned data
    angular
       .module("awesomeapp")
       .controller("listController", listController);

    function listController () {
         var vm = this;
         vm.data = recipesData;
    }

我在视图中的其他位置显示了vm.data中的内容。

问题是，当vm.data设置为recipesData时，它还没有包含任何内容，因为刚刚加载了页面，用户没有放入任何内容，也没有返回任何数据。

我应该怎么做才能在Ajax调用之后设置vm.data？或者它可以在listController函数之外设置吗？

我正在寻找一个优雅的解决方案，以便让一切都更容易维护。谢谢:)）

Answer 1

执行此操作的正确方法是不使用jQuery并使用Angular的$ http服务来检索数据。更合适的方法是创建自己的服务，在内部使用Angular的$ http服务来获取数据。

首先，您将创建该服务。像这样：

angular
       .module("awesomeapp")
       .service("recipeService", recipeService);

function recipeService($http) {
     return $http.get(**url**)
}

然后你的控制器看起来像这样：

function listController (recipeService) {
     var vm = this;
     recipeService.then(response) {
        vm.data = response.data
    }
}

您最终可能会在服务上拥有更多内容，但这应该会让您朝着正确的方向前进。我强烈建议您参考John Papa的Angularjs风格指南https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md，以获取有关如何构建应用的指导。您希望尽量避免在Angular中使用jQuery，但特别是，您希望避免将其用于Angular本身的内容。

AJAX调用成功后返回视图并返回数据

1 个答案: