AngularJSコントローラー
AngularJSコントローラーは、AngularJSアプリケーションからのデータを制御します。
AngularJSコントローラーは、通常のJavaScriptオブジェクトです。
AngularJSコントローラー
AngularJSアプリケーションは、コントローラーによって制御されます。
NG-Controllerディレクティブは、アプリケーションコントローラーを定義します。
コントローラーは、標準のJavaScriptオブジェクトのコンストラクターによって作成されたJavaScriptオブジェクトです。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app "" ng-app ">" dg-app = "> <入力型= "text" ng-model = "firstName"> <br> name:{{fullname()} </div> <script> var app = angular.module( 'myApp'、[]); app.controller( 'personctrl'、function($ scope){$ scope.firsame = " $ scope.fullname = function(){return $ scope.firstname + "" + $ scope.lastname; </script> </body> </html>実行結果:
名前:
姓:
名前:ジョン・ドー
AngularJSアプリケーションは、NG-APPによって定義されます。アプリケーションは<div>内で実行されます。
ng-controller = "myctrl"プロパティは、AngularJS指令です。コントローラーを定義するために使用されます。
MyCTRL関数はJavaScript関数です。
AngularJSは、$スコープオブジェクトを使用してコントローラーを呼び出します。
AngularJSでは、$ Scopeはアプリケーションオブジェクトです(アプリケーション変数と関数に属します)。
コントローラーの$スコープ(スコープとコントロールスコープに相当)は、AngularJSモデルオブジェクトを保存するために使用されます。
コントローラーは、スコープに2つのプロパティ(FirstNameとLastName)を作成します。
NG-Modelディレクティブは、入力ドメインをコントローラーのプロパティ(FirstNameおよびLastName)にバインドします。
コントローラー方法
上記の例は、LastNameとFirstNameの2つのプロパティを持つコントローラーオブジェクトを示しています。
コントローラーには、メソッド(変数と関数)を持つこともできます。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app "" ng-app ">" dg-app = "> <入力型= "text" ng-model = "firstName"> <br> name:{{fullname()} </div> <script> var app = angular.module( 'myApp'、[]); app.controller( 'personctrl'、function($ scope){$ scope.firsame = " $ scope.fullname = function(){return $ scope.firstname + "" + $ scope.lastname; </script> </body> </html>ランニング効果:
名前:
姓:
名前:ジョン・ドー
外部ファイルのコントローラー
大規模なアプリケーションでは、コントローラーは通常、外部ファイルに保存されます。
<script>タグのコードをConstroller.jsという名前の外部ファイルにコピーするだけです。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app "" ng-app ">" dg-app = "> <入力型= "text" ng-model = "firstName"> <br> name:<input type = "text" ng-model = "lastname"> <br> <br> name}} </div> <script src = "personcontroller.js"
実行結果:
名前:
姓:
名前:ジョン・ドー
他の例
次の例では、新しいコントローラーファイルを作成します。
Angular.module( 'myApp'、[])。コントローラー( 'namesctrl'、function($ scope){$ scope.names = [{name: 'jani'、country: 'norway'}、{name: 'hege'、country: 'sweden'}、{name: 'kai'、 'denmark};});ファイルをnamescontroller.jsとして保存します:
次に、アプリケーションでコントローラーファイルを使用します。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <ul> <li ng-repeat = "x in names"> {{x.name + '、' + x.country}} </li> </ul> </div> <script src = "namescontroller.js"> </script> </body> </html>ランニング効果:
上記は、AngularJSコントローラーデータの編集であり、後で補足されます。