skillup

技術ブログ

JavaScript

AngularJSについて

投稿日:

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

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

AngularJSとは?

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

http://wordpress.honobono-life.info/code/angularjs%E3%81%AE%E7%89%B9%E5%BE%B4%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%BE%E3%81%97%E3%81%9F/

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

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

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

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

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

参考

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

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

http://qiita.com/hkusu/items/61127838300d1b429091

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

webpackについて再履修

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

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …