モジュールとコントローラー (2/6)
作成:2015-12-12 09:43
更新:2015-12-12 09:43
更新:2015-12-12 09:43
■消費税計算サンプル
では、実際に簡単なサンプルを作成しながら、モジュールとコントローラーの利用について説明していくことにしましょう。
まずは、HTMLファイルを作りましょう。下のリスト欄に簡単なサンプルを挙げておきます。ここでは、<script src="script.js">という形でスクリプトファイルを読み込むようにしてあります。このscript.jsというファイルが、AngularJSの本体プログラムになります。
一般にJavaScriptのプログラムというのは、HTMLファイルの中に直接埋め込んで書くか、あるいは別途スクリプトファイルを用意してそれを読み込むかします。AngularJSでも、どちらのやり方でもプログラムを作成できます。
が、MVCアーキテクチャーを重視し、画面表示と処理の分離を考えるのであれば、HTML内にそのままJavaScriptのコードを書くのはあまりいい選択ではないでしょう。ここでのように、別ファイルに切り離し、そちらにコントローラー関係を書いたほうが自然です。
ここでは、まず以下のようにして「myapp」というモジュールを利用しています。
これで、myappモジュール内にあるコントローラー類が使えるようになります。ここでは、以下のようにしてコントローラーを利用しています。
myappモジュールには「HeloController」というコントローラーを用意することにしてあります。が、これだとちょっと名前が長すぎですね。「as」は、コントローラーにエイリアス名を与えます。「HeloController as ctl」とすれば、「ctl」という名前で、HeloControllerを使えるようになります。
入力フィールドの<input>タグでは、ng-modelでモデルを指定しています。numは、<body>タグのところでng-init="num = 1000"という形で初期化してある値です。では、「ctl.tax」は？
これは、コントローラー内にある値です。ctl（HeloControllerのこと）の中にある「tax」というプロパティをモデルに設定していたのですね。
その後には、このようなものが書かれています。これは、それぞれHeloController内にある「calcWithTax」「calcWithoutTax」というメソッドの値を書き出しているのです。コントローラー内にある処理（メソッド）は、こんな具合にして呼び出すことができます。
まずは、HTMLファイルを作りましょう。下のリスト欄に簡単なサンプルを挙げておきます。ここでは、<script src="script.js">という形でスクリプトファイルを読み込むようにしてあります。このscript.jsというファイルが、AngularJSの本体プログラムになります。
一般にJavaScriptのプログラムというのは、HTMLファイルの中に直接埋め込んで書くか、あるいは別途スクリプトファイルを用意してそれを読み込むかします。AngularJSでも、どちらのやり方でもプログラムを作成できます。
が、MVCアーキテクチャーを重視し、画面表示と処理の分離を考えるのであれば、HTML内にそのままJavaScriptのコードを書くのはあまりいい選択ではないでしょう。ここでのように、別ファイルに切り離し、そちらにコントローラー関係を書いたほうが自然です。
■コントローラーの利用
ここでは、まず以下のようにして「myapp」というモジュールを利用しています。
<body ng-app="myapp" ng-init="num = 1000">
これで、myappモジュール内にあるコントローラー類が使えるようになります。ここでは、以下のようにしてコントローラーを利用しています。
<div ng-controller="HeloController as ctl">
myappモジュールには「HeloController」というコントローラーを用意することにしてあります。が、これだとちょっと名前が長すぎですね。「as」は、コントローラーにエイリアス名を与えます。「HeloController as ctl」とすれば、「ctl」という名前で、HeloControllerを使えるようになります。
<input type="text" ng-model="ctl.tax">％
<input type="text" ng-model="num">円
入力フィールドの<input>タグでは、ng-modelでモデルを指定しています。numは、<body>タグのところでng-init="num = 1000"という形で初期化してある値です。では、「ctl.tax」は？
これは、コントローラー内にある値です。ctl（HeloControllerのこと）の中にある「tax」というプロパティをモデルに設定していたのですね。
<p class="msg">税込： {{ctl.calcWithTax(num)}}円</p>
<p class="msg">税抜： {{ctl.calcWithoutTax(num)}}円</p>その後には、このようなものが書かれています。これは、それぞれHeloController内にある「calcWithTax」「calcWithoutTax」というメソッドの値を書き出しているのです。コントローラー内にある処理（メソッド）は、こんな具合にして呼び出すことができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!doctype html>
<html>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
body { color:gray; }
h1 { font-size:18pt; font-weight:bold; }
span.label { display:inline-block;width:50px; color:red; }
input { width:100px; }
.msg { font-size:14pt; font-weight:bold;color:gray; }
</style>
</head>
<body ng-app="myapp" ng-init="num = 1000">
<h1>税額計算</h1>
<p>金額を入力して下さい。</p>
<div ng-controller="HeloController as ctl">
<div class="input">
<span class="label">tax:</span>
<input type="text" ng-model="ctl.tax">％
</div>
<div class="input">
<span class="label">price:</span>
<input type="text" ng-model="num">円
</div>
<p class="msg">税込： {{ctl.calcWithTax(num)}}円</p>
<p class="msg">税抜： {{ctl.calcWithoutTax(num)}}円</p>
</div>
</body>
</html>
※関連コンテンツ