Преобразование Angular функции HTTP.get в службу

Я пытаюсь преобразовать функцию Angular HTTP.get в свой controllers.js к службе в services.js.

В примерах, которые я нашел, у всех есть противоречивые способы реализации службы, и их выбор имен запутан. Кроме того, фактическая документация Angular для служб использует еще другой синтаксис, чем все примеры. Я знаю, что это очень просто, но, пожалуйста, помогите мне здесь.

У меня есть 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';
}

ОТВЕТЫ

Ответ 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 передается функции контроллера и предоставляется доступным сервисным модулем, который был добавлен в модуль приложения main.

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: передается функция-конструктор (мы можем назвать ее классом) и возвращает экземпляр класса.
  • поставщик: самый гибкий и настраиваемый, поскольку он дает вам доступ к функциям вызовов инжектора при создании экземпляра службы
  • 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'])

Возможно, вы захотите следовать другой стратегии и вставить модуль в модуль директив

Обратите внимание, что аннотация для синтаксиса inline-зависимостей одинакова для почти всего. Директиве вводится одна и та же служба книг.

Обновлено Plunker: http://plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview

Ответ 2

Ниже приведена реализация сервисного сервиса вместо вышеупомянутого сервиса factory. Надеюсь, что это поможет.

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