なぜangularJSに指令が必要なのですか？

Question

私はangularJSの初心者ですので、これを読んだ人はこれを愚かな質問として感じるかもしれません。

しかし、Googleが返す質問に対する回答は、実際に私の質問に答えるものではありません。

以下のリンクは、アプリケーションが成長するときにサービスを使用する必要があることを示しています。

Reference

ファイン。その場合、サービスは大規模なアプリケーションのオプションになります。

私の理解しているように、指令はDOM操作に使用できる角度ブロックだけです。

サービスで同じことができるときに、なぜこれを選択する必要がありますか？

データベース操作を実行し、データをHTMLコントロールに戻す必要があるときはいつでもディレクティブを使用する必要がありますか？

私は、これらのメソッドを記述する必要がある角度からREST APIコールを作成したいのですか？

Answer 1

AngularJS ディレクティブは、私たちに文字通り「直接」AngularJSはDOM要素で、ユーザー定義の振る舞いを関連付けることができ - 作成し、Webアプリケーションでカスタム要素を使用して大きな柔軟性を与えます。

一方、サービスが提供されます。あなたは、すべてのコントローラー（アプリケーションコードの一部が直接ビューとやりとりする部分）で繰り返したくない、反復的で退屈な作業にサービスを提供します。

私は角度からREST APIコールを作成したい場合は、これらのメソッドを と記述する必要がありますか？

まあ、

あなたは、サーバすなわちのAJAX呼び出しに簡単にAPI呼び出しを行うことができます例ng-resources、用ビルトインのサービスを見ることができます。提供答え、新しいディレクティブを作成することを考えたときに、代わりにコンポーネントの作成について考えることに加え

Answer 2

ディレクティブを使用して、特別なことを行う独自のHTML要素、属性、クラスまたはコメントを作成できます。このディレクティブを他の人に再利用させることさえできます。

たとえば、入力ボックスをクリックするとすぐにすべてのテキストを自動的に選択する指示が必要です。この指令をselect-allとしましょう。これは属性ディレクティブです。

私はこのディレクティブを使用した場合、私のDOMはそれだ

<input type='text' select-all></input> 

ようになります。 select-allのコードがどこにあるのかを知る必要はありません。あなたはそれがどのように機能するかについて何も心配する必要はありません。任意の要素に属性select-allを挿入すれば、魔法のように動作します。

それは指示の美しさです。再利用可能なWebコンポーネントを作成するために使用します。

Answer 3

：

• 構成は
• いくつかのベストプラクティスが
• を強制され、わずかに簡単にコンポーネントベースの促進でありますアーキテクチャ
• は、将来のために準備する：角度2の仕組みに多くの互換性を持たせる。

詳しい情報は、components documentationにあります。ここでは、コンポーネントを段階的に構築する方法を知ることができます。

REST APIを呼び出す場合は、$httpサービスを使用できます。ドキュメントはhereです。網羅的なので、私はhereからのクイックスタートをお勧めします。

Answer 4

ここでは、ServiceとControllerを使用してREST呼び出しを行う例を示します。

// the controller 
(function(ng, undefined){ 
     "use strict"; 
      ng.module("app").controller('MyController', ['$scope', 'MyService', 
       function($scope, MyService){ 

        $scope.myModel = {};// where you store your data 

        // call the service to retrieve data 
        MyService.getResourcesDataById(187, function (result) { 
         $scope.myModel.data = result; // assign result 
        }); 
      }]); 
})(angular); 

// the service 
(function(ng, undefined){ 
    "use strict"; 
     ng.module('app').factory("MyService", ["$http", function($http){ 

      return { 
       getResourcesDataById : function(pId, fct){ 
        // make the call 
        $http({ 
         method: 'GET', 
         url: '/resources/data', 
         params: { 
          id : pId      } 
        }) 

        .then(function(data){ 
         // callback function with the result 
         fct(data); 
        }) 
       } 
      } 
     }]) 

})(angular);