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