AngularJS コントローラ

AngularJS コントローラAngularJSアプリケーションのデータを制御。

AngularJSコントローラーは一般的な JavaScriptオブジェクト。

AngularJS コントローラ

AngularJSアプリケーションはコントローラーで制御されます。

ng-controllerインストラクションはアプリケーションコントローラーを定義します。

コントローラーは標準のJavaScriptオブジェクト構築器で作成されます JavaScriptオブジェクト。

AngularJS インスタンス

<div ng-app="myApp" ng-controller="myCtrl">  
名: <input type="text" ng-model="firstName"><br>  
姓: <input type="text" ng-model="lastName"><br>  
<br>  
全名: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

自分で試してみる

アプリケーション説明：

AngularJSアプリケーションは ng-app="myApp" 定義。アプリケーションは<div>内で実行されます。

ng-controller="myCtrl" 属性はAngularJSインストラクションです。コントローラーを定義します。

myCtrl 関数はJavaScript関数です。

AngularJSは以下を使用します $scope オブジェクトをコントローラーに呼び出します。

AngularJSでは、$scopeはアプリケーションオブジェクト（アプリケーション変数および関数の所有者）です。

コントローラーはスコープ（firstName および lastName）内で2つの属性（変数）を作成します。

ng-model インストラクションは、コントローラー属性（firstName と lastName）にインプットフィールドをバインドします。

コントローラーメソッド

上記の例では、lastName 和 firstName の2つの属性を持つコントローラーオブジェクトを示しました。

コントローラーにはメソッド（関数の変数として）があります：

AngularJS インスタンス

<div ng-app="myApp" ng-controller="personCtrl">  
名: <input type="text" ng-model="firstName"><br>  
姓: <input type="text" ng-model="lastName"><br>  
<br>  
全名: {{fullName()}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

自分で試してみる

外部ファイルのコントローラー

大きなアプリケーションでは、コントローラーを外部ファイルに保存することは一般的です。

以下のコードを「personController.js」と名付けられた personController.js の外部ファイルに：

AngularJS インスタンス

<div ng-app="myApp" ng-controller="personCtrl">  
名: <input type="text" ng-model="firstName"><br>  
姓: <input type="text" ng-model="lastName"><br>  
<br>  
全名: {{fullName()}}  
</div>  
<script src="personController.js"></script>

自分で試してみる

別の例

次の例では、新しいコントローラーファイルを作成します：

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

ファイルを以下の名前で保存します： namesController.js：

その後、アプリケーションでコントローラーファイルを使用します：

AngularJS インスタンス

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>

自分で試してみる