AngularJS における Controller as Syntax の使用方法

Rana Hasnain Khan 2024年2月15日

Angular Angular Controller

AngularJS における Controller as Syntax の使用方法

例を使用して、AngularJS の controller as 構文を紹介します。

AngularJS の `Controller as` 構文

AngularJS の 1.1.5 リリースでは、Controller as 構文が導入されました。これは、AngularJS の考え方に大きな影響を与えます。

これは実験的な機能として追加されました。これは重要な機能であり、コントローラー機能をより速く簡単に使用するのに役立ちます。

controller as 構文を使用して、コントローラーを呼び出してコントローラーに直接アクセスできます。例を見て、名前を出力する簡単な関数を備えた新しいコントローラーを作成してみましょう。

AngularJS で新しいプロジェクトを作成し、controller as 構文の例を見てみましょう。まず、script タグを使用して AngularJS ライブラリを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

次に、ng-app を使用して AngularJS アプリケーションを定義します。

<body ng-app="">
   ...
</body>

script.js ファイルを作成し、コントローラーを作成します。このコントローラーには、以下に示すように、コンソールにログインする関数 getName があります。

import angular from 'angular';

angular.module('app', []).controller('nameController', function() {
  this.getName = function(){
    console.log("Activated!")
  }
});

アプリケーションのフロントエンドを index.html に作成します。以下に示すように、ユーザーがクリックするたびに関数 getName を呼び出すボタンを作成します。

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="app" ng-cloak>
    <div ng-controller="nameController as name">
      <input type="button" value="Get Name" ng-click="name.getName()">
    </div>
  </body>
</html>

出力：

AngularJS の構文例としてのコントローラー

コンソール出力：

controller as syntax in angularjs のコンソール結果

上記の例は、controller as 構文を示しています。これにより、関数を簡単に呼び出して、コントローラーの名前をキーワードまたは簡単に入力できる短い単語として覚えておくことができます。

デモ

著者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

AngularJS の Controller as 構文

関連記事 - Angular Controller

AngularJS の `Controller as` 構文