Angularでは、コントローラーはJavaScript関数（Type/class）であり、角度スコープ（//www.vevb.com/article/91749.htm）のインスタンスとして使用されます。スコープを介して新しい子スコープを作成するとき。$ new API（http://docs.angularjs.org/api/ng.$rootscope.scope#$new）、メソッドのパラメーターとしてコントローラーに渡すオプションがあります（ここには理解していませんでした。これにより、Angularに、コントローラーと新しいスコープを組み合わせて、その動作を拡張する必要があることがわかります。
コントローラーは次のように使用できます。
1.スコープオブジェクトの初期状態を設定します。
2.動作をスコープに追加します。
1.スコープオブジェクトの初期状態を設定する
通常、アプリケーションを作成するときは、角度スコープの初期化状態を設定する必要があります。
Angularは、新しいスコープオブジェクトをコントローラーコンストラクターに適用し（パラメーターとして渡されると推定されます）、初期スコープ状態を確立します。これは、Angularがコントローラータイプインスタンスを作成しないことを意味します（つまり、コントローラーのコンストラクターに新しいオペレーターを使用しません）。コンストラクターは常に既存のスコープオブジェクトに適用されます。
モデル属性を作成することにより、範囲の初期状態を作成します。例えば：
関数GreetingCtrl（$ scope）{$ scope.greeting = "hola！";}
コントローラー「GreetingCtrl」は、テンプレートに適用できる「グリーティング」と呼ばれるモデルを作成します。
2。スコープオブジェクトに動作を追加します
Angular Scopeオブジェクトの動作は、テンプレートとビューのスコープメソッド属性の形式です。この動作は、アプリケーションのモデルを変更できます。
ガイド付きモデルの章（//www.vevb.com/article/91777.htm）で説明されているように、任意のオブジェクト（またはプリミティブタイプ）がスコープに割り当てられ、モデル属性になります。スコープに添付された機能は、テンプレートビューで使用でき、Angular ExpressionまたはNg Event Handlerディレクティブ（NgClickなど）を介して呼び出すことができます。
3.コントローラーを正しく使用します
一般的に言えば、コントローラーはあまり多くのことをしようとしてはいけません。単一のビューに必要なビジネスロジックのみを含める必要があります（そして、それは好転しておらず、私は常にコントローラーが単なる転送であると考えていました...）。
コントローラーをシンプルに保つために、一般的な方法は、コントローラーに属さない作業をサービスに抽出し、コントローラーの依存関係注入を通じてこれらのサービスを使用することです。これらのことは、ウィザードの依存噴射サービスの章で説明します。
コントローラーで次のことをしないでください。
4。コントローラーを角度スコープオブジェクトに関連付けます
スコープを使用して、コントローラーとスコープオブジェクトを明示的に関連付けることができます。$ new、または暗黙的にngcontrollerディレクティブ（http://docs.angularjs.org/api/ng.directive:ngcontroller）または$ルートサービス（http://docs.angularjs.org/api/ng.froute）。
1。コントローラーコンストラクターとメソッドの例
コントローラーコンポーネントがAngularでどのように機能するかを説明するために、次のコンポーネントを使用して小さなアプリケーションを作成しましょう。
テンプレートのメッセージには、スパイスモデルへのバインディングが含まれています。スパイスモデルは、デフォルトで「非常に」設定されています。スパイスモデルの値をクリックするボタンに従って「チリ」または「ハラペーニョ」に設定すると、メッセージバインディングによってメッセージが自動的に更新されます。
<！doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> spicy-controller </title> <meta content = "ie = edge = chrome = 1" type = "text/css"> .ng-cloak {display：none; } </style> </head> <body> <div ng-controller = "spicyctrl"> <button ng-click = "chilispicy（）"> chili </button> <button ng-click = "jalapenospicy（ 'jalapeño'）">jalapeño</button> <p/</py </picy {> </pick> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function spicyctrl（$ scope）{$ scope.spice = "bely"; $ scope.chilispicy = function（）{$ scope.spice = "chili"; }; $ scope.jalapenospicy = function（val）{this.spice = val; }; } </script> </body> </html>上記の例で注意すべきこと：
次の例に示すように、コントローラー法はパラメーターを取得できます。
<！doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controller-method-arments </title> <meta content = "ie = edge = 1" type = "text/css"> .ng-cloak {display：none; } </style> </head> <body> <div ng-controller = "spicyctrl"> <input ng-model = "customspice" value = "wasabi"/> <button ng-click = "spicy（customspice）"> customspice </button </button> <br/> <button ng-click = "spicy（ 'chili） {{spice}} spicy！</p> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script> <script> <text/javascript "> function spicyctrl（$ scope）{$ scope.spicy =" very "; $ scope.spicy = function（spice）{$ scope.spice = spice; }; } </script> </body> </html>Spicyctrlコントローラーは、パラメーター「スパイス」を持つメソッドのみを定義し、「スパイシー」と呼ばれることに注意してください。テンプレートは、コントローラーメソッドを参照し、定数文字列またはモデル値を渡すことができます。
Angularのコントローラー継承は、範囲の継承に基づいています。次の例を見てみましょう。
<！doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controller-inheritance </title> <meta content = "ie = edge = 1" type = "text/css"> .ng-cloak {display：none; } </style> </head> <body> <div ng-controller = "mainctrl"> <p> good {{timeofday}}、{{name}}} ng-controller = "babyctrl"> good {{timeofday}}、{{name}！</p> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <scope 「メインタイム」; $ scope.name = 'main name'; } function childctrl（$ scope）{$ scope.name = 'child name'; }関数babyctrl（$ scope）{$ scope.timeofday = 'baby time'; $ scope.name = 'baby name'; } </script> </body> </html>3 ngControllerをテンプレートに直接ネストする方法に注目してください。私たちの見解では、このテンプレート構造により、4つのスコープが作成されます。
継承された作業は、コントローラーとモデルで同じです。したがって、前の例では、すべてのモデルをコントローラーから書き換えることができます。
注：前述のように、コントローラーはAngularを介して直接初期化されるのではなく、そのスコープオブジェクトを適用するため、2つのコントローラー間の標準的なプロトタイプ継承は機能しません。 （コントローラーはAngularによって直接インスタンス化されるのではなく、スコープオブジェクトに適用されます。以前と同じですが、まだ理解していません。）
5。テストコントローラー
コントローラーをテストするには多くの方法がありますが、以下に示すように、最高の規則の1つは$ Rootscopeと$コントローラーの注入が必要です。 （テストはjasmine.jsと調整する必要があります）
<！doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controll> controller> </title> <meta content = "ie = edge、chrome = 1" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display：none; } </style> </head> <body> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </scrip> <script src = "../ angular-scenario-1.0.1.js" type = "text/javascript"> </> <src = "../ jasmine.js" " type = "text/javascript"> </script> <script src = "../ angular-mocks-1.0.1.js" type = "text/javascript"> </script> <script> <script = "text/javascript"> function myController（$ scope）{$ scope.spices = [{"pasilla" {"name"： "halapeno"、 "spiceness"： "hot hot hot！"}、{"name"： "habanero"、 "spiceness"： "lava hot !!"}]; $ scope.spice = "habanero"; } describs（ "myController function"、function（）{describe（ "mycontroller"、function（）{var scope; beforeeach（function（$ rotscope、$ controller）{scope = $ rootscope。$ new（）; $ new（）; spices（）{scope.spices.length）.tobe（3））; }）; （function（）{var jasmineenv = jasmine.getenv（）; jasmineenv.updateinterval = 1000; var gasmine.trivialreporter（）; jasmineenv.addreporter（trivialreporter）; jasmineenv.specfilter = return（return（spec）{spec）{spect）; currentWindowOnload.onload = function（）{currentWindowOnload（）}ネストされたコントローラーをテストする必要がある場合は、DOMと同じスコープ継承関係をテストで作成する必要があります。
<！doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controll> controller> </title> <meta content = "ie = edge、chrome = 1" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display：none; } </style> </head> <body> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </scrip> <script src = "../ angular-scenario-1.0.1.js" type = "text/javascript"> </> <src = "../ jasmine.js" " type = "text/javascript"> </script> <script src = "../ angular-mocks-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function mainctrl（$ scope）{$ scope.timeofday = 'main time'; $ scope.name = 'main name'; } function childctrl（$ scope）{$ scope.name = 'child name'; }関数babyctrl（$ scope）{$ scope.timeofday = 'baby time'; $ scope.name = 'baby name'; }説明（ "myController"、function（）{var mainscope、childscope、babyscope; beforeeach（function（$ rootscope、$ controller）{mainscope = $ rootscope。$ new（）; var mainctrl = $ controller（$ sctrl、{mainctrl：scope}）; childscope = maincope $コントローラー（$ SCOPE：CHILDSCOPE}）; expect.tobe（ "main -scope.time）; （function（）{var jasmineenv = jasmine.getenv（）; jasmineenv.updateinterval = 1000; var gasmine.trivialreporter（）; jasmineenv.addreporter（trivialreporter）; jasmineenv.specfilter = return（return（spec）{spec）{spect）; currentWindowOnload.onload = function（）{currentWindowOnload（）}上記は、angularjsがコントローラーコンポーネントを理解することに関する情報です。今後も関連情報を追加し続けます。ご支援ありがとうございます！