angularjs-将Angular HTTP.get函数转换为服务

我正在尝试将controllers.js中的Angular app.js函数转换为services.js中的服务。

我发现这些示例在实现服务时都存在冲突的方式,它们对名称的选择令人困惑。 此外,服务的实际角度文档使用的语法与所有示例都不同。 我知道这非常简单,但请在这里帮助我。

我有app.jscontrollers.jsservices.jsfilters.js

app.js

angular.module('MyApp', []).
    config(['$routeProvider', function($routeProvider)
        {
            $routeProvider.
                when('/bookslist', {templateUrl: 'partials/bookslist.html', controller:             BooksListCtrl}).
                otherwise({redirectTo: '/bookslist'});
        }
    ]);

controllers.js

function BooksListCtrl($scope,$http) {
    $http.get('books.php?action=query').success(function(data) {
        $scope.books = data;
    });

    $scope.orderProp = 'author';
}
Brandon asked 2020-06-30T05:20:22Z
2个解决方案
121 votes

考虑模块和依赖注入。

因此,假设您有这三个文件

<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="app.js"></script>

您将需要三个模块

1.主应用模块

angular.module('MyApp', ['controllers', 'services'])
  .config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/bookslist', {
        templateUrl: 'partials/bookslist.html', 
        controller:  "BooksListCtrl"
      })
      .otherwise({redirectTo: '/bookslist'});
  }]);

请注意,其他两个模块被注入到主模块中,因此它们的组件可用于整个应用程序。

2.控制器模块

当前,您的控制器是全局函数,您可能需要将其添加到控制器模块中

angular.module('controllers',[])
  .controller('BooksListCtrl', ['$scope', 'Books', function($scope, Books){
    Books.get(function(data){
      $scope.books = data;
    });

    $scope.orderProp = 'author';
  }]);

app.js传递给控制器功能,并由注入到主应用程序模块中的服务模块提供。

3.服务模块

在这里定义app.js服务。

angular.module('services', [])
  .factory('Books', ['$http', function($http){
    return{
      get: function(callback){
          $http.get('books.json').success(function(data) {
          // prepare data here
          callback(data);
        });
      }
    };
  }]);

注册服务有多种方式。

  • 服务:传递了一个构造函数(我们可以称其为类)并返回该类的实例。
  • provider:最灵活和可配置的,因为它使您可以在实例化服务时访问注入器调用的功能
  • factory:传递给实例化服务时注入程序调用的函数。

我偏爱使用app.js函数,只是让它返回一个对象。 在上面的示例中,我们仅返回带有get函数的对象,该函数传递了成功回调。 您也可以更改它以通过错误函数。


编辑注释中回答@yair的请求,这是将服务注入指令的方式。

4.指令模块

我遵循通常的模式,首先添加js文件

<script src="directives.js"></script>

然后定义一个新模块并注册内容,在这种情况下为指令

angular.module('directives',[])
  .directive('dir', ['Books', function(Books){
    return{
      restrict: 'E',
      template: "dir directive, service: {{name}}",
      link:function(scope, element, attrs){
        scope.name = Books.name;
      }
    };
  }]);

app.js中将指令模块注入主模块。

angular.module('MyApp', ['controllers', 'services', 'directives']) 

您可能想采用其他策略,然后将模块注入指令模块

请注意,几乎所有内容的语法内联依赖项注释都是相同的。 该指令被注入相同的Books服务。

更新后的Plunker:[http://plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview]

jaime answered 2020-06-30T05:22:14Z
3 votes

这是服务服务的一种实现方式,而不是上述的工厂服务。 希望能帮助到你。

app.js

angular.module('myApp', ['controllers', 'services'])
 .config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/bookslist', {
        templateUrl: 'partials/bookslist.html', 
        controller:  "BooksListCtrl"
      })
      .otherwise({redirectTo: '/bookslist'});
  }]);

service.js

angular.module('services', [])
  .service('books', ['$http', function($http){
      this.getData = function(onSuccess,onError){
          $http.get('books.json').then(
              onSuccess,onError);
      }  
  }]);

controller.js

angular.module('controllers',[])
    .controller('BooksListCtrl', ['$scope', 'books', function($scope, books){
       $scope.submit = function(){

        $scope.books = books.getData($scope.onSuccess,$scope.onError);
       }
           $scope.onSuccess = function(data){
           console.log(data);
           $scope.bookName = data.data.bookname;
           }

           $scope.onError = function(error){
               console.log(error);
           }
  }]);
Yeshwanth Kanneganti answered 2020-06-30T05:22:47Z
translate from https://stackoverflow.com:/questions/13937318/convert-angular-http-get-function-to-a-service