Angular JS

angular jsを使ったWebアプリ

  • このエントリーをはてなブックマークに追加
  • LINEで送る
AngularJSでWebシステム開発

今まではスマートフォンアプリをメインに作成してきましたが、
今回はWebアプリをつくってみました

開発環境は Angular JSです。
今回はじめて導入した
Yeoman + Grunt + Bower というお助けツールも使ってみました。
結構話題になっている御三家です。
なるほど、すごく便利だった。
詳しくは後日レポートしたいと思います。

さて、話をもどします。

Angular JSでWebAppを作ったという話

アプリ名は「日報クラウドnipo
長いので略してnipoです。

どんなアプリかというと、日報をクラウドグループウェア化しようって発想です。
ワードとかで日報書くと、毎日1ファイルずつ増えていく。管理もめんどくさいし、
いちいちファイルコピーしたり、リネームしたり。
その辺をもっと簡単にぱぱっとできるようにしようじゃないかって。

宣伝終わり。

結構前に、jQueryでWebアプリみたいなものを作った
ことがあるのですが、まぁ色々めんどくさかった。
DOMをゴリゴリ操作するのがjQueryなので、
データを受信して、それをテーブルに書き換えるとか
やろうとすると、結構たいへんなんです。

でもAngular JSは「双方向データバインディング」が
あるので、簡単です。
ng-repeatとかでテーブルのカラムをバンバン書き出せるので、
コードも短く簡潔に書ける。
以前の苦労はなんだったんだろうと思うくらいです。
勘違いしないで欲しいのは、別にjQueryが悪いとか、劣っていると
いうことでは無いのです。

要は使いドコロなんです。
jQueryは超強力なセレクタがあるので、HTMLのどのオブジェクトでも
自由に取得できるし、アニメーションなんかの処理もすごく簡単。

でも頻繁にデータが書き換わるような処理は苦手です。

逆にAngular JSはアニメーション機能は貧弱です。
エフェクトとかCSSで自分で書いてね。というスタイルです。
しかし、配列やオブジェクトの値が変わると、自動でHTML上の表示も変わる
双方向データバインディングが便利すぎる。

Webアプリには持って来いなフレームワークです。

これから数日に渡り、nipoでハマったポイントなどを紹介していきます。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

AngularJS+BootStrapでサロンカルテを作りました

【作品例 サロンカルテ】
サロンカルテはAngular JSとBootStrap3を使って開発されたWebクラウドシステムの1つです。
強力なデータバインド機能のおかげで、お客様のカルテデータをサーバから取得、ng-repeatを使うだけで簡単に画面へ出力できたり、BootStrapで手軽におしゃれな画面が実装できます

サロンカルテのホームページ