AngularJS 基礎学習メモ Controller_AngularJS

AngularJS コントローラーは、AngularJS アプリケーションのデータを制御するために使用されます。

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

AngularJS コントローラー
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>

コードの説明:

AngularJS アプリケーションは ng-app="myApp" で定義されます。アプリケーションの有効範囲は、ng-app が配置されている

内にあります。

ng-controller="myCtrl" 属性は、コントローラーを定義する AngularJS ディレクティブです。

myCtrl 関数は通常の JavaScript 関数です。

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

AngularJS では、$scope はアプリケーション オブジェクト (つまり、アプリケーション変数と関数の所有者) です。

コントローラーには、firstName と lastName という 2 つのプロパティ (または変数) が含まれています。これらは $scope オブジェクトにアタッチされます。

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

コントローラーメソッド
上の例は、コントローラー オブジェクトに lastName と firstName という 2 つのプロパティが含まれていることを示しています。

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

<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>

コントローラを外部ファイルに配置します
大規模なアプリケーションでは、コントローラー コードが外部ファイルに記述されることがよくあります。

bc98f0c4d425a5fb8a5b85248570a343 のコードを personController.js 外部ファイルにコピーします。

<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>

別の例

新しいコントローラー ファイルを作成し、namesController.js という名前を付けます:

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

次に、アプリケーションでこのコントローラー ファイルを使用します:

<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>

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。