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

时间:2015-02-03 07:48:54

标签: javascript angularjs angularjs-factory

我是angularjs的新手,所以我正在浏览我最初在网上找到的基本示例,只是为了理解所使用的工作和概念。当我遇到“工厂服务创建”的概念(这是一种将服务器中的数据暴露给视图和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>`

所以在我发布的代码中,任何人都可以让我知道或解释“工厂列表和查找方法之间的流程(特别记住回调参数)”吗?   我无法理解为什么自己再次调用相同的工厂方法(回调参数)

请帮帮我..

3 个答案:

答案 0 :(得分:0)

我评论的代码部分是

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的参数。回调基本上是在服务成功执行时要调用的函数。由于list和find都要对服务器进行异步调用,因此您希望在调用完成后收到通知。

Angular有一种更简洁的方法,称为承诺。如果我们实现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承诺api在这里有很好的记录

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

简而言之,promise对象是一个契约,当异步工作完成后,它将被解析()(成功完成)或拒绝(完成失败),然后调用promise对象函数。

然后(success(),error())

你的控制器会变成。

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

希望它对你有所帮助。

答案 1 :(得分:0)

关于列表功能

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

countries.find函数是相同的基本模式,区别在于$routeParams从路由中获取/:countryName,并将其作为countries.find函数传递给$scope.country为此目的(似乎)从服务器返回的响应数据中选择一个特定国家,然后将其分配给{{1}}属性的参数。

答案 2 :(得分:0)

首先,我们为angularJS中的任何应用程序定义模块。 然后我们定义模块的配置,其中inside []我们保持所有必需的依赖。我们可以定义我们自己的angular指令,它将连接java控制器以获得各自格式的值,如json等。然后在定义角度控制器时,我们可以调用我们的在我们的角度控制器中定义指令以使数据可用,并且从角度控制器我们可以获得将在html或任何视图页面中显示的角度视图的值。