AngularJS : js-factory 服务在调用之间的流程

Question

我是 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>`

所以在我发布的代码中，任何人都可以让我知道或解释“工厂列表和查找方法（特别要记住回调参数）”之间的流程吗？我不明白为什么同一个工厂方法被自己再次调用（回调参数）

请帮帮我..

Answer 1

我评论的代码部分是

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。

这两个函数都有一个名为回调的参数。回调基本上是您在服务成功执行时要调用的函数。由于 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;
          }
        };
      });

Angular 的承诺 api 在这里有很好的记录

https://docs.angularjs.org/api/ng/service/$q

简而言之，它所说的 promise 对象是一个契约，当一个异步工作完成时，它要么被 resolved() （成功完成）要么被拒绝（未成功完成）并且 promise 对象然后函数将被调用。

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

你的控制器会变成。

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)
      }));

希望对您有所帮助。

Answer 2

关于列表功能

实例化 CountryListCtrl 控制器时，countries 服务（它是一个对象）作为参数传递。
然后调用 countries.list 函数（显然在 countries 服务中定义）并传递一个回调函数。
countries.list 函数发出 GET 请求，如果成功（即 $http promise 成功解析），在 CountryListController 控制器中调用该函数时传入的匿名回调函数是$http 服务将返回的数据作为参数传递 - 然后匿名函数将其分配给 $scope.countries 属性。

countries.find 函数是相同的基本模式，区别在于 $routeParams 从路由中获取 /:countryName，并将其传递给 countries.find用作参数的目的（似乎）从服务器返回的响应数据中挑选出特定国家，然后将其分配给 $scope.country 属性.

Answer 3

首先，我们在 angularJS 中为任何应用程序定义模块。然后我们正在为模块定义配置，在 [] 中我们保留所有必需的 dependency.we 可以定义我们自己的 angular 指令，它将连接 java 控制器以获取相应格式的值，如 json etc.Then 在定义 angular 控制器时，我们可以在我们的 angular 控制器中调用我们定义的指令来使数据可用，并且从 angular 控制器我们可以获取值 angular 视图将显示在 html 或任何视图页面中。

AngularJS : js-factory 服务在调用之间的流程

AngularJS : js-factory service's flow between the calls

javascript

angularjs

angularjs-factory