libro
www.tuyano.com
初心者のためのAngularJS入門

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

作成:2015-12-12 09:46
更新:2015-12-12 09:46

■スクリプトを作成しよう

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

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

■モジュールの作成
angular.module( 名前 , 配列 );
モジュールの作成は、「angular」というオブジェクトの「module」メソッドを使って行います。angularというオブジェクトは、AngularJSの基底となるオブジェクトです。AngularJSの機能は、すべてこのangularオブジェクトの中にまとめられています。

moduleメソッドは、第1引数にモジュール名のテキストを指定します。第2引数には、このモジュールが参照する他のモジュールを配列にまとめて指定します。特に参照するものがないなら、空の配列にしておきます。

なお、ここでは特に使っていませんが、moduleメソッドは、作成したモジュールのオブジェクトを返値として返します。

■コントローラーの作成
モジュール.controller( 名前 , 関数 );
コントローラーは、moduleで作成したモジュールにある「controller」メソッドで作成します。第1引数には、コントローラーの名前を指定します。

第2引数が問題です。ここに、コントローラーに組み込む実装部分が用意されます。「関数」とありますが、これは実はコントローラーの「コンストラクタ関数」になるのです。

コンストラクタ関数というのは、JavaScriptで、オブジェクトを作成するのに利用されるものですね。ここで、プロパティやメソッドを定義しておくのです。

※プログラムリストが表示されない場合

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

※関連コンテンツ

「初心者のためのAngularJS入門」に戻る