angular jsを使ったWebアプリ

AngularJSでWebシステム開発 Angular JS
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でハマったポイントなどを紹介していきます。