Angular のコントローラー、サービス、命令間の関係についての簡単な説明

この記事では、angular コントローラー、サービス、命令の関係について紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[関連する推奨事項: "angular チュートリアル "]

全体として、これら 3 つのコンポーネント間の関係は次のとおりです。

• サービスは、リモート サーバーからのデータの取得と保存を担当します。
• サービス上に構築されたコントローラーは、Angular のスコープ階層にデータと機能を提供します。
• サービスおよびコントローラー上に構築されたディレクティブは、ドキュメント オブジェクト モデル (DOM) 要素と直接対話します。

コントローラーが依存関係インジェクターに登録されていないため、コントローラーとサービスはコントローラーを依存関係としてリストできません。

<div ng-controller="MyController"></div>

var m = angular.module('myModule');
 
m.factory('myService', function() {
    return { answer: 42 };
});
 
m.controller('MyController', function(myService) {
    //使用myService
});
 
m.controller('MyController2', function(MyController) {
    //错误：使用控制器注册
});
 
m.factory('myService2', function(MyController) {
    //错误：使用控制器注册
});

各 ng コントローラーは 1 回インスタンス化され、サービスは 1 回だけインスタンス化されます。つまり、サービスはシングルトンです。

コントローラーは $scope などのローカル オブジェクトを依存関係として一覧表示できますが、サービスはローカル オブジェクトを依存関係として一覧表示できません。

m.factory('myService', function($scope) {
    //错误：$scope未使用依赖注入器进行注册
});

これが、Angular で JavaScript データと関数をサービスではなくコントローラーが HTML に公開する理由です。コントローラーは $scope にアクセスできます。

ディレクティブにはコントローラーを関連付けることができ、サービスを依存関係としてリストすることができます。ただし、コントローラーとサービスはディレクティブを依存関係としてリストすることはできません。

angular.module('stockDogApp')
  .directive('stockTable', function() {
  	return {
  		template: 'Views/templates/stock-table.html',
  		restrict: 'E',
  		scope: {
  			watchlist: '='
  		},
  		controller: function ($scope) {
  			//...
  		}
  	}
  });

ディレクティブには、ディレクティブのスコープが常に別のディレクティブのスコープの子孫である必要があることを保証するために使用される require 属性を持つこともできます。

angular.module('stockDogApp')
  .directive('stockRow', function($timeout, QuoteService) {
  	return {
  		restrict: 'A',
  		require: '^stockTable' //stockTable指令，^表示在父作用域中寻找
  		scope: {
  			stock: '=',
  			isLast: '='
  		},
  		link: function ($scope, $element, $attrs, stockTableCtrl) {
  			//..
  		}	
  	}
  });

ディレクティブ オプション require では、stockRow ディレクティブのスコープがstockTable ディレクティブのスコープの子孫である必要があり、インスタンス化されたstockTable ディレクティブのコントローラー (リンク関数の 4 番目のパラメーター) にアクセスできる必要があります。 。 2 つのディレクティブを一緒に使用する必要がある場合、require ディレクティブ オプションがそのジョブに適したツールです。

注: 「AngularJS による高度なプログラミング」を参照し、単なるメモとして扱ってください。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がAngular のコントローラー、サービス、命令間の関係についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。