skillup

技術ブログ

JavaScript

AngularJSについて

投稿日:2016年12月27日 更新日:

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。

数年前から流行りだしているようで、少しずつ使っている方も増えているのではないでしょうか。

AngularJSとは?

機能的なことなどはいろんな場所で書かれています。網羅性でいうと下記リンクが一番詳しいでしょう。

AngularJSの特徴についてまとめました

自分が採用した一番の理由ですが帳票の明細行の追加や削除を楽にしたかったからです。

例えば受注情報を作るときにはよほど特別なものでなければ伝票(注文日、注文者などの情報)と明細(個別の商品の情報など)に分かれます。

この明細行なんですが通常のjQueryだけだと作るのがめっちゃ大変です。自力で作った方は大変さがわかっていただけると思います。AngularJSのサンプルをみたところこれが非常に簡単にできることを知り早速取り入れてみることに・・・・

学習コストもそこそこあるため、慣れるまでは結構時間がかかりましたが、慣れていざ帳票部分を作ってみるとすごく楽です。特に計算なんかをするのがめちゃくちゃ楽で、今までjQueryでがりがり書いていた労力は何だったんだろうという気がします。

といってもやろうと思ってから形になるまではなかなか進まず数か月かかりましたが・・・・

参考

http://8th713.github.io/LearnAngularJS/#/

念願の帳票の明細アプリはこのリンク先のものを使用させていただきました。サイト構成といい、アプリといい最高です。めっちゃ感謝!

AngularJS でAPIをコールし結果を取得するサンプル①

プログラム側との連携は上記のように書けばOKです。

次回以降、自分の整理の意味も込めて詳しくAngularJSについて説明していこうと思います。

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

JavaScriptのthisについて

今回はJavaScriptのthisについて。 JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。 4種類あるとされていますが、使われ方で分類すると私の場合、下記の …

no image

webpackについて再履修

webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。 今まで書いた既存のwe …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …