モジュールとコントローラー (3/6)

では、今回のサンプルで使うスクリプトを作成しましょう。下にそのサンプルコードを掲載しておきました。「script.js」というファイル名で、HTMLファイルと同じ場所に配置してください。

今回のサンプルは、先に作った消費税計算を修正したものです。taxとpriceという２つの入力フィールドがありましたね。ここに、それぞれ税率（％）と金額を記入すると、リアルタイムにその税込価格や税抜き（本体）価格を計算し表示する、という処理がここに用意されるわけです。

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);
            };
        }
    );