Javascript AngularJS:js工厂服务&x27；s调用之间的流_Javascript_Angularjs_Angularjs Factory

Javascript AngularJS:js工厂服务&x27；s调用之间的流

javascript angularjs

Javascript AngularJS:js工厂服务&x27；s调用之间的流,javascript,angularjs,angularjs-factory,Javascript,Angularjs,Angularjs Factory,我是angularjs的新手，所以我在浏览我最初在网上找到的基本示例，只是为了了解工作原理和使用的概念。当我遇到“factory service creation”的概念时（这是一种将数据从服务器公开到和angularjs中的视图的方法），我发现很难理解服务的函数参数和对它的调用之间的流程 `<html ng-app="countryApp"> <head> <meta charset="utf-8"> <title>Angul

我是angularjs的新手，所以我在浏览我最初在网上找到的基本示例，只是为了了解工作原理和使用的概念。当我遇到“factory service creation”的概念时（这是一种将数据从服务器公开到和angularjs中的视图的方法），我发现很难理解服务的函数参数和对它的调用之间的流程

`<html ng-app="countryApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', ['ngRoute']);

      countryApp.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'country-list.html',
            controller: 'CountryListCtrl'
          }).
          when('/:countryName', {
            templateUrl: 'country-detail.html',
            controller: 'CountryDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      });

      countryApp.factory('countries', function($http){
        return {
          list: function(callback){
            $http.get('countries.json').success(callback);
          },
          find: function(name, callback){
            $http.get('countries.json').success(function(data) {
              var country = data.filter(function(entry){
                return entry.name === name;
              })[0];
              callback(country);
            });
          }
        };
      });

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

      countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
        countries.find($routeParams.countryName, function(country) {
          $scope.country = country;
        });
      });
    </script>
  </head>
  <body>
    <div ng-view></div>
  </body>
</html>`

`
Angular.js示例
var countryApp=angular.module（'countryApp'，['ngRoute']）；
countryApp.config（函数（$routeProvider）{
$routeProvider。
当（“/”{
templateUrl:'country list.html'，
控制器：“CountryListCtrl”
}).
当（“/：countryName”{
templateUrl:“country detail.html”，
控制器：“CountryDetailCtrl”
}).
否则({
重定向到：'/'
});
});
countryApp.factory（'countries'，函数（$http）{
返回{
列表：函数（回调）{
$http.get（'countries.json'）.success（回调）；
},
查找：函数（名称、回调）{
$http.get（'countries.json'）.success（函数（数据）{
var国家=数据过滤器（功能（输入）{
返回条目。名称===名称；
})[0];
（国家）；
});
}
};
});
countryApp.controller（'CountryListCtrl'，函数（$scope，countries）{
国家/地区列表（功能（国家/地区）{
$scope.countries=国家；
});
});
countryApp.controller（'CountryDetailCtrl'，函数（$scope，$routeParams，country）{
countries.find（$routeParams.countryName，函数（国家）{
$scope.country=国家；
});
});
`

因此，在我发布的代码中，是否有人能让我知道或解释“工厂列表”和find方法之间的流程（尤其要记住回调参数）？我不明白为什么同样的工厂方法会再次被自己调用（回调参数）

请帮助我。

我要评论的代码部分是

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

    return {
      list: function(callback){
        $http.get('countries.json').success(callback);
      },
      find: function(name, callback){
        $http.get('countries.json').success(function(data) {
          var country = data.filter(function(entry){
            return entry.name === name;
          })[0];
          callback(country);
        });
      }
    };
  });

在这里，工厂返回一个具有两个函数的对象，即list和find

这两个函数都有一个名为callback的参数。callback基本上就是您希望在成功执行服务时调用的函数。由于list和find都将对服务器进行异步调用，因此您希望在调用完成时收到通知

然而Angular有一种更简洁的方法，叫做promise。如果我们实现promise api，代码就会变得更简洁

countryApp.factory('countries', function($http, $q){
        return {
          list: function(){
            var defered = $q.defer();
            $http.get('countries.json').success(function(result){
                 defered.resolve(result);
            })
            .error(function(error){
                 defered.reject(error)
            })
            return defer.promise
          },
          find: function(name){
            var defered = $q.defer();
            $http.get('countries.json').success(function(data) {
              var country = data.filter(function(entry){
                return entry.name === name;
              })[0];
              defered.resolve(country);
            })

            .error(function(error){
                 defered.reject(error)
            })
            return defer.promise;
          }
        };
      });

Angulars promise api在这里有很好的文档记录

简言之，它所说的承诺对象是一个契约，当异步工作完成时，它将被解析（）（成功完成）或拒绝（失败完成），然后将调用承诺对象函数

然后（成功（），错误（））

您的控制器将成为

countryApp.controller('CountryListCtrl', function ($scope, countries){
        countries.list().then(function(countries) {
          $scope.countries = countries;
        });
      }, function(error){
          console.log("unable to fetch the list of countries : " + error)
      });

      countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
        countries.find($routeParams.countryName).then(function(country) {
          $scope.country = country;
        }, function(error){
          console.log("unable to find the country: " + error)
      }));

希望对您有所帮助。

关于列表功能

当实例化

CountryListCtrl

控制器时，

countrys

服务（对象）将作为参数传递。
然后调用

countries.list

函数（显然在

countries

服务中定义）并传递回调函数。

countries.list

函数发出GET请求，如果成功（即$http承诺成功解决），匿名回调函数，在调用

CountryListController

控制器中的函数时传入，$http服务将返回的数据作为参数传递，然后匿名函数将该参数分配给

$scope.countries

属性

countries.find

函数是相同的基本模式，不同的是，

$routeParams

从路由中提取

/：countryName

，并将其传递到

国家。find

函数作为用于此目的的参数（似乎）从服务器返回的响应数据中选择特定国家，然后将其分配给

$scope.country

属性。

首先，我们在angularJS中为任何应用程序定义模块。

然后，我们定义模块的配置，其中在[]我们保留所有必需的依赖项。我们可以定义我们自己的angular指令，该指令将连接java控制器，以获得json等格式的值。然后，在定义angular控制器时，我们可以在angular控制器中调用我们定义的指令，以使数据可用，并且从angular控制器可以获得angula的值r视图，该视图将以html或任何视图页面显示。

感谢您的关注更改。！！，它确实帮助了我，至少80%，…但我的问题是，ru建议我完全忽略使用我使用的方法的意义？我肯定仍然对中使用的回调函数的概念感到困惑我的方法。，