AngularJS コントローラー


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

AngularJS コントローラーは、通常の JavaScript オブジェクト です。

AngularJS コントローラー

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

ng-controller ディレクティブは、アプリケーション コントローラーを定義します。

コントローラーは JavaScript オブジェクトで、標準の JavaScript オブジェクト コンストラクター によって作成されます。

インスタンス

<!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="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 = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

アプリケーション分析:

AngularJSアプリケーションはng-appによって定義されます。アプリケーションは <div> 内で実行されます。

ng-controller="myCtrl" 属性は AngularJS ディレクティブです。コントローラーを定義するために使用されます。

myCtrl 関数は JavaScript 関数です。

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

AngularJS では、$scope はアプリケーション オブジェクト (アプリケーションの変数と関数に属する) です。 AngularJS Modelオブジェクトの保存には

Controllerの$scope(スコープ、コントロールスコープに相当)を使用します。

コントローラーはスコープ内に 2 つのプロパティを作成します (名と姓)。

ng-model ディレクティブは、入力フィールドをコントローラーのプロパティ (firstName と lastName) にバインドします。

コントローラー メソッド

上の例は、lastName と firstName という 2 つのプロパティを持つコントローラー オブジェクトを示しています。

コントローラーにはメソッド (変数と関数) を含めることもできます:

インスタンス

<!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="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 = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します


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

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

<script> タグ内のコードを personController.js という名前の外部ファイルにコピーするだけです:

Instance

<!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="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

</body>
</html>

インスタンスを実行する»

オンラインの例を表示するには、[インスタンスを実行] ボタンをクリックします


その他の例

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

angular.module('myApp', []).controller('namesCtrl', function($scope) {
,country:'Denmark'}
];
});


ファイルを namesController.js:
として保存します。次に、アプリケーションでコントローラー ファイルを使用します:

Instance
<!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="myApp" ng-controller="namesCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

インスタンスを実行する»

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

←
→