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

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

jQueryの書き方について

jQueryの書き方は一般的に以下のように書きます。

上記の処理ですが、細かく書くとDOMが構築されてから実行という意味が含まれていま …