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

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 http:/ …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …