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がコントローラーコンポーネントを理解することに関する情報です。今後も関連情報を追加し続けます。ご支援ありがとうございます!