web-dev-qa-db-ja.com

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';
}
serviceangularjs
46
Brandon

モジュールと依存性注入の観点から考えてください。

だから、これらの3つのファイルがあるとしましょう

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

3つのモジュールが必要です

1.メインアプリモジュール

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

他の2つのモジュールはメインモジュールに挿入されるため、それらのコンポーネントはアプリ全体で使用できます。

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：コンストラクター関数（クラスと呼ぶことができます）が渡され、クラスのインスタンスを返します。
  • provider：サービスをインスタンス化するときにインジェクターが呼び出す機能にアクセスできるため、最も柔軟で構成可能です
  • factory：サービスをインスタンス化するときにインジェクターが呼び出す関数が渡されます。

factory関数を使用し、オブジェクトを返すだけの私の好み。上記の例では、成功コールバックが渡されるget関数を持つオブジェクトを返すだけです。エラー関数を渡すように変更することもできます。

Editコメントで@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のmainモジュールにdirectiveモジュールを挿入します。

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

別の戦略に従って、モジュールをdirectivesモジュールに挿入することもできます

構文インライン依存アノテーションはほとんどすべてで同じであることに注意してください。ディレクティブは同じBooksサービスに注入されます。

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

121
jaime

上記のファクトリサービスではなく、サービスserviceの実装を次に示します。それが役に立てば幸い。

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