モジュールとコントローラー (3/6)
作成:2015-12-12 09:46
更新:2015-12-12 09:46
更新:2015-12-12 09:46
■スクリプトを作成しよう
では、今回のサンプルで使うスクリプトを作成しましょう。下にそのサンプルコードを掲載しておきました。「script.js」というファイル名で、HTMLファイルと同じ場所に配置してください。
今回のサンプルは、先に作った消費税計算を修正したものです。taxとpriceという2つの入力フィールドがありましたね。ここに、それぞれ税率(%)と金額を記入すると、リアルタイムにその税込価格や税抜き(本体)価格を計算し表示する、という処理がここに用意されるわけです。
moduleメソッドは、第1引数にモジュール名のテキストを指定します。第2引数には、このモジュールが参照する他のモジュールを配列にまとめて指定します。特に参照するものがないなら、空の配列にしておきます。
なお、ここでは特に使っていませんが、moduleメソッドは、作成したモジュールのオブジェクトを返値として返します。
第2引数が問題です。ここに、コントローラーに組み込む実装部分が用意されます。「関数」とありますが、これは実はコントローラーの「コンストラクタ関数」になるのです。
コンストラクタ関数というのは、JavaScriptで、オブジェクトを作成するのに利用されるものですね。ここで、プロパティやメソッドを定義しておくのです。
今回のサンプルは、先に作った消費税計算を修正したものです。taxとpriceという2つの入力フィールドがありましたね。ここに、それぞれ税率(%)と金額を記入すると、リアルタイムにその税込価格や税抜き(本体)価格を計算し表示する、という処理がここに用意されるわけです。
■モジュールの作成
angular.module( 名前 , 配列 );モジュールの作成は、「angular」というオブジェクトの「module」メソッドを使って行います。angularというオブジェクトは、AngularJSの基底となるオブジェクトです。AngularJSの機能は、すべてこのangularオブジェクトの中にまとめられています。
moduleメソッドは、第1引数にモジュール名のテキストを指定します。第2引数には、このモジュールが参照する他のモジュールを配列にまとめて指定します。特に参照するものがないなら、空の配列にしておきます。
なお、ここでは特に使っていませんが、moduleメソッドは、作成したモジュールのオブジェクトを返値として返します。
■コントローラーの作成
モジュール.controller( 名前 , 関数 );コントローラーは、moduleで作成したモジュールにある「controller」メソッドで作成します。第1引数には、コントローラーの名前を指定します。
第2引数が問題です。ここに、コントローラーに組み込む実装部分が用意されます。「関数」とありますが、これは実はコントローラーの「コンストラクタ関数」になるのです。
コンストラクタ関数というのは、JavaScriptで、オブジェクトを作成するのに利用されるものですね。ここで、プロパティやメソッドを定義しておくのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
angular.module('myapp',[]) .controller('HeloController', function(){ this.tax = 8; this.calcWithTax = function(val){ return Math.floor(val * (100 + this.tax * 1) / 100); }; this.calcWithoutTax = function(val){ return Math.floor(val / (100 + this.tax * 1) * 100); }; } );
※関連コンテンツ