Javascript
AngularJSを使ってみた（基本機能編）
ヤス
更新日:2021/08/05
こんにちわ！ヤスです！
本日はAngularJS(アンギュラージェイエス)なるものを使って見たいと思います。
AngularJSってなに？
AngularJSは、Google製JavascriptフルスタックMVCフレームワークで、HTMLとJavaScriptを簡単に分離することで、それぞれの役割分担がはっきりし、コードの可読性が増します。
そんなAngularJSの特徴を見ていてきたいと思います。
テンプレートエンジン・データ双方向バインディング
Webアプリを作成するとき、jQueryを使って、DOMをビュンビュン動かしたい、バリデーションもやろう、あ、画面制御もしちゃえ！
結果→『jQuery添えのスパゲッティコードの完成。』なんて経験があると思います。
AngularJSは、HTMLに「{{ xxxx }}」を使って直接処理や変数を埋め込むことが可能です。
また、ModelとVIEWを双方向にバインディングですることで、画面上で変更された値をVIEWに即時反映できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <!-- inputのqty(数量)またはcost(単価)の値を変更すると、下部に合計金額を表示するサンプル --> <!-- ng-app = angularJS宣言 --> <html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> </head> <body> <!-- ng-init = 初期値 --> <div ng-init="qty=1;cost=2"> <b>Invoice:</b> <div> <!-- qty(数量)を定義 --> Quantity: <input type="number" ng-model="qty" required > </div> <div> <!-- cost(単価)を定義 --> Costs: <input type="number" ng-model="cost" required > </div> <div> <!-- qty(数量)とcost(単価)を掛けた値を表示。currency(金額)としてフォーマット。 --> <b>Total:</b> {{qty * cost | currency}} </div> </div> </body> </html> |
まとめ
今回は、AngularJSの基本機能を簡単に紹介しました。
他の特徴についてはまたの機会に紹介いたします。
