AngularJSのサンプルアプリ

http://weblogs.asp.net/dwahlin/archive/2013/10/25/learning-angularjs-by-example-the-customer-manager-application.aspx

1 comment | 1 point | by Jshiike 約3年前


Jshiike 約3年前 | ▲upvoteする | link

Dan Wahlinがブログの一連のポストで、AngularJSについてまとめています。AngularJSがはじめての方は、まずこちらの1時間+のビデオを見てからのほうがわかりやすいと思います。そのビデオの最後にも少しでてくるサンプルアプリについてまとめてみした。



[Customer Managementサンプルアプリの画面]


1) 主要機能


AngularJSの全ての機能を網羅してはいないが、下記のポイントを含んでいる。


  1. factoryと再利用可能なデータservice(app/servicesフォルダ参照)

  2. カスタムdirective (app/directivesフォルダ参照)

  3. カスタムpaging (app/views/customers/customers.htmlとapp/controllers/customers/customersController.js参照)

  4. カスタムfilter (app/filtersフォルダ参照)

  5. 再利用可能なserviceとあわせカスタムダイアログを表示 (app/services/modalService.js参照)

  6. factoryを使ったAJAXコール (app/services/customersService.js参照)

  7. Breezeでのデータのやりとり (app/services/customersBreezeService.js参照) app/services.config.jsを開き、useBreezeプロパティをtrueにすることにより、アプリがBreeze factoryを利用できるようにする。

  8. AJAXコールの間、カスタムオーバーレイを表示できるように、HTTPリクエストをインターセプトする(app/directives/wcOverlay.js参照)

  9. GreenSockライブラリを利用したカスタムアニメーション(app/animations/listAnimations.js参照)

  10. CSSを使ったカスタムAngularJSアニメーション(Content/animation.css参照)

  11. controller, service/factory, directive, filter等を定義するJavaScriptパターン(appフォルダのどのJavaScriptファイルでも参照)

  12. データのカードビュー/リストビュー表示(app/views/customers/customers.htmlとapp/controllers/customers/customersController.js参照)

  13. AngularJSバリデーション機能(app/views/customerEdit.htmlとapp/controllers/customerEditController.jsとapp/directives/wcUnique.js参照)

  14. ネストのcontroller

  15. その他

2) アプリの構成


[フォルダ一覧]


index.htmlは、ng-viewでアプリのviewがどこに読み込まれるか定義し、AngularJSへのスクリプト参照をもつ。AngularJS routing & アニメーションスクリプトはScriptフォルダに、カスタムアプリスクリプトはappフォルダに。


appフォルダには主要なスクリプトが全てある。スクリプトがクライアントのプロパティにくる限り(いずれにしても、帯域 & HTTPコールを減らすために、縮小/連結するだろうから)、どのようなフォルダ構成にするかは自由。参考のために筆者の構成は、


  1. カスタムアニメーションのコードはanimationフォルダに。AngularJSアニメーション(Content/animations.cssのCSSで定義)の他にも、GreenSockを使って最初のカスタマーデータの読み込みをアニメーションする。

  2. controllerは、controllerのrootフォルダとサブフォルダにわかれている。[参考図]

  3. directivesフォルダには、このアプリのためにつくられたカスタムdirectiveが保管されている。

  4. filtersフォルダには、city/state & product情報をフィルタリングするカスタムfilterが置かれている。

  5. partialsフォルダは、モーダルダイアログなどのpartial viewが入っている。

  6. servicesフォルダの中は、factoryとserviceで、データの機能を提供するスクリプトが入っている。

  7. viewsフォルダも、viewのrootフォルダとサブフォルダにわかれている [参考図]

3) バックエンドの技術


このCustomer ManagementアプリはGithubに公開されてます。ASP.NET Web API + Entity Framework + SQL Server (LocalDb)もしくはNode.js + Express + MongoDBが選択できます。


4) ASP.NET Web API


Visual Studios 2012 or higher (Express 2013 for Web versionも可)から.slnファイルを開き、F5を押すと、ブラウザが自動的にローンチしてアプリを表示します。


5) Node.js


手順としては、


  1. Express / MongoDB / Mongoose (package.json)をインストールするために、CustomerManagerディレクトリで ‘npm install’ を実行

  2. MongoDBにサンプルデータを読み込む

  3. 'mongod'を実行してMongoDBデーモンを起動

  4. initMongoCustData.jsがあるCustomerManagerディレクトリに移動し、’mongo’を実行して、MongoDBシェルを起動させる。

  5. 下記をMongoシェルに入力し、シードファイルを読み込む。
    • use customgr

    • load(“initMongoCustData.js”)

    • load(“initMongoSettingsData.js”) 

    • load(“initMongoStateData.js”)


  6. CustomerManager/serverに移動し、’node app.js’を実行してNode/Expressサーバを起動。

  7. http://localhost:3000で確認できる。

6) フロントエンド技術


AngularJS (ngRoute/ngAnimationモジュール) + Bootstrap + Anugular UI Bootstrap + GreenSock Animations


サーバにコールバックするのにネイティブのAngularJS $httpをデフォルトで使っているが、app/services/config.jsを変更してBreezeJSを使うことも可能。その際は、jQueryとQが必要になるが、既にindex.htmlに入れてある。Breeze.jsについては詳しく知りたい場合は、こちらを参照


7) アプリView


Customer View / Card View


app/views/customers/customers.html


編集ができる画面 [参考画面]


Customer View / List View


app/views/customers/customers.html


顧客情報を標準のリスト表示 [参考画面]


Customer Edit View


app/customers/customerEdit.html


メールアドレスのユニーク判定あり [参考画面]


Customer Orders View


app/customers/customerOrders.html


[参考画面]


Orders View


app/views/orders/orders.html


[参考画面]


8) カスタムdirective


ユニークバリューdirective (app/directives/wcUnique.js) : メールアドレスのユニーク判定用で、ngModel.$setValidity()がエラーメッセージをハンドリングする。このdirectiveの詳細はこちら。[参考画像]


Angularオーバーレイdirective (app/directives/wcOverlay.js): XmlHttpRequestコールをインターセプトして、カスタムオーバーレイを表示する。このサンプルアプリの中でも利用できるが、Githubにも別途公開している。[参考画面]


9) カスタムfilter


app/filters/nameCityStateFilter.js [参考画像]


app/filters/nameProductFilter.js [参考画像]


10) 最後に


標準アプリカスタムroutingは、Githubで公開してます。カスタムroutingの詳細はこちらを参照ください。




AngularJSの始め方


AngularJSの設計思想 [Google I/O 2013]


Ruby on RailsとAngularJSとNode.jsを比較してみた



#angularjs

Back