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

この記事では主にangularjsでのコントローラーの使い方を紹介します。 angularjsコントローラー angularjsアプリケーションのデータを制御します。それでは、この記事を見てみましょう

angularjs コントローラーの紹介:

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

AngularJS コントローラーは、通常の

JavaScript オブジェクト です。

AngularJS コントローラー

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

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

コントローラーは

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

<p>

名: <input><br>
名: <input><br>
<br>
姓名: {{firstName + " " + lastName}}

</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, 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>

名: <input><br>
姓: <input><br>
<br>
姓名: {{fullName()}}

</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;personCtrl&#39;, function($scope) {
     $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

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

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

<script> タグ内のコードをコピーするだけです。 personController.js の外部ファイル:<p><pre class="brush:php;toolbar:false">&lt;p ng-app=&quot;myApp&quot; ng-controller=&quot;personCtrl&quot;&gt; First Name: &lt;input type=&quot;text&quot; ng-model=&quot;firstName&quot;&gt;&lt;br&gt; Last Name: &lt;input type=&quot;text&quot; ng-model=&quot;lastName&quot;&gt;&lt;br&gt; &lt;br&gt; Full Name: {{firstName + &quot; &quot; + lastName}} &lt;script src=&quot;personController.js&quot;&gt;&lt;/script&gt;その他の例&lt;h2&gt;&lt;/h2&gt;次の例では、新しいコントローラー ファイルを作成します:&lt;p&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;angular.module('myApp', []).controller('namesCtrl', function($scope) {      $scope.names = [          {name:'Jani',country:'Norway'},          {name:'Hege',country:'Sweden'},          {name:'Kai',country:'Denmark'}      ];  });</pre>名前を付けてファイルを保存します。 namesController.js:<p></p>次に、アプリケーションでコントローラー ファイルを使用します:<p></p> <pre class="brush:php;toolbar:false">&lt;p&gt; &lt;/p&gt;</pre> <ul>    <li>      {{ x.name + ', ' + x.country }}   </li> </ul> <script></script> さて、この記事は終わりです (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

AngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がございましたら、以下にメッセージを残してください。

以上がAngularJSコントローラーの使い方は？ Angularjs コントローラーは angularjs アプリケーション インスタンスの解決を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。