ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJSコントローラーの使い方は? Angularjs コントローラーは angularjs アプリケーション インスタンスの解決を制御します
この記事では主にangularjsでのコントローラーの使い方を紹介します。 angularjsコントローラー angularjsアプリケーションのデータを制御します。それでは、この記事を見てみましょう
angularjs コントローラーの紹介:
AngularJS コントローラー AngularJS アプリケーションのデータを制御します。
AngularJS コントローラーは、通常のJavaScript オブジェクト です。
AngularJS コントローラーAngularJS アプリケーションはコントローラーによって制御されます。ng-controller ディレクティブは、アプリケーション コントローラーを定義します。
コントローラーはJavaScript オブジェクトで、標準の JavaScript オブジェクト コンストラクター によって作成されます。
<p ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 名: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>アプリケーション分析: AngularJS アプリケーションは
ng-app によって定義されます。アプリケーションは 内で実行されます。
ng-controller="myCtrl" 属性は AngularJS ディレクティブです。 コントローラーを定義するために使用されます。
myCtrl関数はJavaScript関数です。
AngularJS は、$scope オブジェクトを使用してコントローラーを呼び出します。
AngularJS では、$scope はアプリケーション オブジェクト (アプリケーションの変数と関数に属する) です。 AngularJS Modelオブジェクトの保存にはControllerの$scope(スコープ、コントロールスコープに相当)を使用します。
コントローラーはスコープ内に 2 つのプロパティ (firstName と lastName) を作成します。
ng-model ディレクティブは、入力フィールドをコントローラーのプロパティ (firstName と lastName) にバインドします。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS 開発マニュアル の列にアクセスして学習してください)
コントローラー メソッド 上の例は、lastName と firstName という 2 つのプロパティを持つコントローラー オブジェクトを示しています。 コントローラーにはメソッド (変数と関数) を含めることもできます:<p ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </p> <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>外部ファイル内のコントローラー 大規模なアプリケーションでは、コントローラーを外部ファイルに保存するのが一般的です。