吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

コンストラクタ関数の記述方法

2013年11月25日 / category : angularjs, その他

コンストラクタ関数とは、
オブジェクトが生成された際に実行される初期化関数です。

AngularJSでも、ng-controllerを設定した際に、コンストラクタ関数が実行されますが、
どうやら、記述方法が2パターンあるようです。

【コントローラ内に設定する記述方法】

AngularJSのcontroller関数が、正直いまの段階では少々あやふやな知識のまま進めています。

controller

英語なので、いまいち説明がわかりません。。。
とりあえず、controller関数の使用記述方法は下記です。

$controller(constructor, locals);

パラメーターですが、
第1引数のconstructorは、ng-controller属性の値を指定します。
第2引数のlocalsの設定が少々あやふやです。。。
基本的には、下記のような記述方法で使用できます。

$controller(‘コンストラクタ関数名’, ['$scope', コンストラクタ関数]);

実際に、コンストラクタ関数をfunctionに置き換えると、

$controller('コンストラクタ関数名', ['$scope', function($scope){
	コンストラクタ関数の処理
}]);

さらにここに、$locationという変数を追加することができます。

$controller(‘コンストラクタ関数名’, ['$scope', $location, コンストラクタ関数]);

こんな感じ。
これを実際に、コンストラクタ関数をfunctionに置き換えると、

$controller('コンストラクタ関数名', ['$scope', $location, function($scope, $location){
	コンストラクタ関数の処理
}]);

function内の引数ですが、
第1引数の$scopeは、ng-controller属性で指定したスコープのルートです。
$scope.nameと記述すれば、HTML側のスコープ内の{{name}}を指すことになります。

第2引数の$locationですが、公式サイトでは、
$location
と説明があります。
要は、JavaScriptのwindow.locationを基にした解析ができるみたいです。

以上が、コンストラクタ関数をコントローラ内に設定する記述方法です。

【グローバル関数として設定する記述方法】

記述方法は非常に簡単、

function コンストラクタ関数名($scope, $location){
	コンストラクタ関数の処理
}

当たり前ですが、記述方法が異なるだけで、使用方法は、コントローラ内に設定する記述方法と同じです。

以上が、コンストラクタ関数をグローバル関数として設定する記述方法です。

どちらの記述方法が良いかは、現段階では判断できませんが、
コントローラ内に記述したほうが、他のJavaScriptと差別化できて良いのかな、と思ったりしてます。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/1/
■サンプルファイル一式
ダウンロード – zip
■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/angular.min.js"></script>
<script src="js/app.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div class="box" ng-controller="CtrlA">
<dl>
<dt>コンストラクタ関数をコントローラ内に設定する記述方法</dt>
<dd>url : {{url}}</dd>
</dl>
</div>

<div class="box" ng-controller="CtrlB">
<dl>
<dt>コンストラクタ関数をグローバル関数に設定する記述方法</dt>
<dd>url : {{url}}</dd>
</dl>
</div>

</body>
</html>
■JavaScript – app.js
var myApp = angular.module('app', []);

//コンストラクタ関数をコントローラ内に設定する記述方法
myApp.controller('CtrlA', ['$scope', '$location', function($scope, $location){
	$scope.url = $location.absUrl();
}]);

//コンストラクタ関数をグローバル関数に設定する記述方法
function CtrlB($scope, $location){
	$scope.url = $location.absUrl();
}