AngularJSコントローラーの使い方は？ Angularjs コントローラーは angularjs アプリケーションインスタンスの解決を制御します-jsチュートリアル-php.cn

この記事では主に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>

ログイン後にコピー

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

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

人気のチュートリアル

詳細>