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

Question

我正在尝试将HTTP.get我的Angular 函数转换controllers.js为服务services.js.

我发现的例子都有相互冲突的方式来实现服务,他们选择的名称令人困惑.此外,服务的实际角度文档使用的语法与所有示例的语法不同.我知道这很简单,但请帮帮我.

我有app.js,controllers.js,services.js,filters.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';
}

Answer 1

考虑模块和依赖注入.

所以,假设你有这三个文件

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

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

3.服务模块

这是您定义Books服务的地方.

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

有多种注册服务的方式.

• service:传递构造函数(我们可以将其称为类)并返回该类的实例.
• provider:最灵活和可配置的,因为它允许您在实例化服务时访问注入器调用的函数
• factory:传递一个函数,注入器在实例化服务时调用.

我喜欢使用该factory函数,只是让它返回一个对象.在上面的示例中,我们只返回一个带有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