AngularJS コントローラは、AngularJS アプリケーションのデータを制御します。
AngularJS コントローラは、通常の JavaScript オブジェクト です。
AngularJS アプリケーションは、コントローラによって制御されます。
ng-controller ディレクティブは、アプリケーションのコントローラを定義します。
コントローラは、標準的な JavaScript オブジェクト・コンストラクタで作成された JavaScriptオブジェクトです。
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.firstName
= "John";
$scope.lastName = "Doe";
});
</script>
Try it Yourself »
アプリケーションの説明：
AngularJS アプリケーションは、ng-appで定義します。アプリケーションは、 <div> の内部で実行されます。
ng-controller="myCtrl" 属性は、AngularJS のディレクティブです。コントローラを定義します。
myCtrl 関数は、 JavaScript 関数です。
AngularJS は、$scope を使用してコントローラを呼び出します。
AngularJS において、$scope はアプリケーション・オブジェクト（アプリケーションの変数と関数の所有者）です。
コントローラは、scope 内に 2 つのプロパティ（firstName と lastName）を作成します。
ng-model ディレクティブは、入力フィールドを コントローラ・プロパティ(firstName と lastName)にバインドします。
コントローラは、メソッドを持つこともできます：
上の例は、2つのプロパティ、lastName と firstName を持つコントローラ・オブジェクトを示しています。
コントローラは、メソッド（関数としての変数）を持つこともできます：
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',
function($scope) {
$scope.firstName = "John";
$scope.lastName
= "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
Try it Yourself »
大きなアプリケーションでは、コントローラを外部ファイルに格納するのが一般的です。
単に、外部ファイル名 personController.js 内の <script> タグの間にコードをコピーするだけです：
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
Try it Yourself »
次の例のため、新規にコントローラ・ファイルを作成します：
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
namesController.js としてファイルをセーブします：
次に、アプリケーションにコントローラ・ファイルを使用します：
<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>
Try it Yourself »