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

我试图将我的controllers.js中的Angular HTTP.get函数转换为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';
}

考虑模块和依赖注入。

所以，让我们说你有这三个文件

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

你需要三个模块

主应用模块

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

图书被传递到控制器功能，并且由在主应用程序模块中注入的服务模块提供。

3.服务模块

这是您定义图书服务的位置。

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：被传递一个构造函数(我们可以称之为一个类)并返回一个类的实例。
>提供程序：最灵活和可配置，因为它允许访问实例化服务时注入器调用的函数
> 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','services','directives'])

您可能需要遵循不同的策略并将模块注入到指令模块中

请注意，语法内联依赖性注释对于几乎所有内容都是相同的。指令注入相同的图书服务。

更新Plunker：http://plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview

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

猜你在找的Angularjs相关文章