46

HTTP.getの Angular関数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';
}
4

2 に答える 2

121

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

したがって、これら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コントローラー関数に渡され、メインアプリ モジュールに挿入されたサービス モジュールによって使用可能になります。

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 サービスに挿入されます。

更新されたプランカー: http://plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview

于 2012-12-18T19:10:36.590 に答える