Question

我从本教程http://curran.github.io/screencasts/introToAngular/exampleViewer/#/42

学习AngularJS

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 - 什么是＆＃34;回调＆＃34;功能，它究竟做了什么？它是内置功能吗？如果没有，为什么没有该功能的定义。

* 2 - 在youtube视频中，该家伙说＆＃34; list＆＃34;是一个函数，为什么用＆＃34;：＆＃34; ？是＆＃34;列表＆＃34;在CountryListCtrl（控制器）中，功能与国家（工厂）中return{}的功能相同

* 3 - 与＆＃34; * 2＆＃34;相同具有不同的功能 - ＆gt;的找到

Answer 1

Callbacks中的

1） Javascript是捕捉代码中启动的进程的异步性质的概念之一。基本上它是在某个进程改变其状态后调用的任何函数 - 例如完了。更一般地说，它必须处理Promises。

更多回调示例，以掌握这个想法：

in jQuery.animation, when animation on the page is over, callback fires
in Angular $http method, when data is received from the server (or failed to receive), success of error callbacks are fired

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

在控制器中调用countries.list时，它会调用先前在工厂中定义的getData函数。简而言之，一种定义方法的方法仅在工厂内 - 在这种情况下它是getData，而在外面可用的 - {{1 }}和list，当它在控制器中使用时。因此，在find语句中，您有javascript对象，您可以通过使用return调用对象来获取value：

key

Answer 2

1

callback只是getData函数的单个参数名称。在函数体内，它像函数一样使用 - 它是callback function。

当调用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(...)时，您正在调用分配给列表属性的函数在工厂（即getData）。

3

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

AngularJS - 工厂，http请求和回调

2 个答案:

1

2

3