ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJS コントローラーの使用方法の簡単な紹介_AngularJS

AngularJS コントローラーの使用方法の簡単な紹介_AngularJS

WBOYオリジナル: 2016-05-16 15:54:391015ブラウズ

AngularJS アプリケーションは主にコントローラーに依存して、アプリケーション内のデータフローを制御します。コントローラーは、ng-controller ディレクティブを使用して定義されます。コントローラーは、プロパティ/プロパティと JavaScript オブジェクトを含む関数です。各コントローラーは $scope パラメーターを受け入れて、コントローラーによって制御されるアプリケーション/モジュールを指定します。

<div ng-app="" ng-controller="studentController">
...
</div>

ここでは、ng-controller ディレクティブを使用してコントローラー StudentController を宣言しています。次のステップとして、studentControllerを次のように定義します

<script>
function studentController($scope) {
  $scope.student = {
   firstName: "yiibai",
   lastName: "com",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>

StudentController は $scope を JavaScript オブジェクトのパラメーターとして定義します。
$scope は、studentController オブジェクトを使用してアプリケーションを表します。
$scope.student は、studentController オブジェクトのプロパティです。
FirstName と lastName は、$scope.student オブジェクトの 2 つのプロパティです。デフォルト値を渡しました。
fullName は $scope.student オブジェクトの関数であり、そのタスクはマージされた名前を返すことです。
fullName 関数では、student オブジェクトが結合された名前を返すようにします。
注として、コントローラーオブジェクトを別の JS ファイルで定義し、関連するファイルを HTML ページに配置することもできます。

これで、ng-model を使用するか、次の式を使用して、studentController 属性を使用できるようになります。

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

現在、2 つの入力ボックスがあります:student.firstName とstudent.lastname。
HTML にstudent.fullName() メソッドが追加されました。
これで、名と姓の入力ボックスに入力した内容を入力する限り、2 つの名前が自動的に更新されることがわかります。

例

次の例は、コントローラーの使用法を示します。
testAngularJS.html ファイルの内容は次のとおりです:

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

出力

Web ブラウザで textAngularJS.html を開くと、次の結果が表示されます:

2015616120726250.png (679×365)

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：従来のドキュメントオブジェクトモデルに対する JavaScript のサポートについての簡単な紹介_基礎知識次の記事：従来のドキュメントオブジェクトモデルに対する JavaScript のサポートについての簡単な紹介_基礎知識

続きを見る

AngularJS コントローラーの使用方法の簡単な紹介_AngularJS

関連記事