Wahlinがブログの一連のポストで、AngularJSについてまとめています。AngularJSがはじめての方は、まずこちらの1時間+のビデオを見てからのほうがわかりやすいと思います。そのビデオの最後にも少しでてくるサンプルアプリについてまとめてみした。主要機能AngularJSの全ての機能を網羅してはいないが、下記のポイントを含んでいる。factoryを利用できるようにする。アプリの構成[フォルダ一覧]index.htmlは、ng-viewでアプリのviewがどこに読み込まれるか定義し、AngularJSへのスクリプト参照をもつ。アニメーションスクリプトはScriptフォルダに、カスタムアプリスクリプトはappフォルダに。appフォルダには主要なスクリプトが全てある。HTTPコールを減らすために、縮小/連結するだろうから)、どのようなフォルダ構成にするかは自由。参考のために筆者の構成は、カスタムアニメーションのコードはanimationフォルダに。AngularJSアニメーション(Content/animations.cssのCSSで定義)の他にも、GreenSockを使って最初のカスタマーデータの読み込みをアニメーションする。controllerは、controllerのrootフォルダとサブフォルダにわかれている。[参考図]directivesフォルダには、このアプリのためにつくられたカスタムdirectiveが保管されている。product情報をフィルタリングするカスタムfilterが置かれている。viewが入っている。servicesフォルダの中は、factoryとserviceで、データの機能を提供するスクリプトが入っている。ManagementアプリはGithubに公開されてます。MongoDBが選択できます。versionも可)から.slnファイルを開き、F5を押すと、ブラウザが自動的にローンチしてアプリを表示します。実行MongoDBにサンプルデータを読み込む'mongod'を実行してMongoDBデーモンを起動initMongoCustData.jsがあるCustomerManagerディレクトリに移動し、’mongo’を実行して、MongoDBシェルを起動させる。下記をMongoシェルに入力し、シードファイルを読み込む。app.js’を実行してNode/Expressサーバを起動。http://localhost:3000で確認できる。$httpをデフォルトで使っているが、app/services/config.jsを変更してBreezeJSを使うことも可能。その際は、jQueryとQが必要になるが、既にindex.htmlに入れてある。Breeze.jsについては詳しく知りたい場合は、こちらを参照。メールアドレスのユニーク判定用で、ngModel.$setValidity()がエラーメッセージをハンドリングする。このdirectiveの詳細はこちら。XmlHttpRequestコールをインターセプトして、カスタムオーバーレイを表示する。このサンプルアプリの中でも利用できるが、Githubにも別途公開している。最後に標準アプリ、カスタムroutingは、Githubで公開してます。カスタムroutingの詳細はこちらを参照ください。RailsとAngularJSとNode.jsを比較してみた#angularjsBack。