javascript - AJAX调用成功并返回数据后更新 View

Question

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

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

这是我的 Angular Controller 声明:

    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 中的内容显示在我 View 的其他位置。

问题是，当 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**)
}

然后你的 Controller 看起来像这样:

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获取有关如何构建应用程序的指导。一般来说，您希望尽量避免将 jQuery 与 Angular 一起使用，但特别是，您希望避免将它用于 Angular 本身所做的事情。