AngularJS -工厂，http请求和回调

Question

我从本教程中学习AngularJS，http://curran.github.io/screencasts/introToAngular/exampleViewer/#/42

youtube上也有一段视频，带你浏览整个过程

当您打开链接(示例42)时，您将看到我被卡在哪里了。

我希望你能简单地解释一下这几条线路上发生了什么

countryApp.factory('countries', function($http){

    var cachedData;

    function getData(callback){ // *1
      if(cachedData) {
        callback(cachedData); // *1
      } else {
        $http.get('countries.json').success(function(data){
          cachedData = data;
          callback(data); // *1
        });
      }
    }

    return {
      list: getData, // *2
      find: function(name, callback){ // *3
        getData(function(data) {
          var country = data.filter(function(entry){
            return entry.name === name;
          })[0];
          callback(country); // *1
        });
      }
    };
  });

  countryApp.controller('CountryListCtrl', function ($scope, countries){
    countries.list(function(countries) { // *2
      $scope.countries = countries;
    });
  });

  countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
    countries.find($routeParams.countryName, function(country) { // *3
      $scope.country = country;
    });
  });

*1 -“回调”功能是什么?它到底是做什么的？是内置的功能吗？如果不是，为什么没有函数的定义。

*2 -在youtube视频中，这个家伙说“列表”是一个函数，为什么要用":“来声明呢？CountryListCtrl (控制器)中的“列表”与国家(工厂)的return{}中的“列表”功能相同吗？

*3 -与具有不同函数-> 的"*2“相同

Answer 1

1) 回调 in Javascript是用来捕捉代码中启动的进程异步性的概念之一。基本上，它是在某个进程改变其状态后调用的任何函数--例如完成。在更一般的情况下，它必须处理应许。

更多回调的例子，来理解这个想法：

• 在jQuery.animation中，当页面上的动画结束时，回调会触发
• 在角$http方法中，当从服务器接收数据(或接收失败)时，将触发错误回调的成功。

2)和3) --这是定义工厂提供的一组方法的方法：

在控制器中调用countries.list时，它调用getData函数，这是在工厂中前面定义的。简而言之，一种只在工厂中定义方法可用的方法--在本例中是getData，以及在控制器中使用时在- list和find之外可用的方法。因此，在return语句中，您可以使用javascript对象通过使用key调用对象来获得value。

var myFactory = {
    "list" : "getData",
    "find" : 42
};
myFactory.list
//Outputs: "getData";
myFactory.find
//Outputs:42;

Answer 2

1.

callback只是getData函数的单个参数名。在函数体中，它被用作一个函数--它是一个回调函数。

当调用getData时，会提供一个回调函数：

getData(function(data) {
  // ...
});

这是在另一个函数(分配给返回对象的find属性)内完成的，该函数还有一个名为callback的参数。不过，请注意，这些变量恰好具有相同的名称。它们存在于完全不同的范围内。传递给find的回调在传递给getData的回调中使用。

find: function(name, callback){
  getData(function(data) {          // define getData callback
    // ...
    callback(country);              // call find callback
  });
}

2.

list是countries工厂返回的对象的属性的名称。它的值是getData函数

return {
  list: getData,
  // ...
}

这个对象是作为countries，注入到控制器中的，因此当您在控制器中调用countries.list(...)时，您将调用分配给工厂中的list属性(即getData)的函数。

3.

在控制器中，countries.find(...)调用分配给工厂中返回的对象的find属性的函数。