Twitterのサービスを一言で言ってしまえば「140文字以内のテキストを投稿するSNS」で凄くシンプルで取っ付き易く、わかりやすいサービスで、技術的な題材としても最適です。

TwitterをAngularJSとTypeScriptで作るとこんな感じかな？と思い、触りだけ作ってみました。

http://kaibadash.github.io/angularjs_twitter/

ソース:
https://github.com/kaibadash/angularjs_twitter

対象

AngularJSはハッキリいって敷居(学習コスト)が高いです。
このエントリは、AngularJSを調べ始めて、これから凝ったことを始めるぞ！という方をターゲットに書いたつもりで、まだ一切書いたことが無い方には不向きかもしれません。
TypeScriptを使っていますが、コンパイルされたJavaScript(js/twitter.js)は人間が読めるものなので、参考になると思います。

このサンプルについて

• Home、Mention、リプライの動作しか作っていません(がサンプルとしては十分かな…)
• APIはダミーのファイルが置かれており、それをリクエストしています。実際はクロスドメインの問題とOAuth認証の問題があるので、APIを中継するようなサーバを作る必要があるでしょう。
• TypeScriptを使っています。
• Twitterを真似たレイアウトになっていますが、対応するAPIが無いため、実際はTwitterと同じものを作ることはできません。
• あとからソースコードを修正する可能性があります。githubが最新で正しいコードになるようにします。pull request歓迎です^^;
• ControllerはxxxViewModelという名前に統一しています。

使用ライブラリなど

特殊なものは使っていません。

• bootstrap
  • Twitter社製、CSS frameworkです。サクッとそれなりのデザインにできる。
  • スマフォ対応も簡単。
  • Twitter社製なので、TwitterっぽいUIにできますね。
• ui-router
  • 標準の$routeより、多機能で情報も豊富。
• bower
  • Twitter社製。
  • JavaScriptのライブラリをコマンドラインで配置できる。
  • 最近はオワコンという声をよく聞くが…？
• gulp
  • TypeScriptの変更を監視し、自動的にビルドしてくれる。
• tsd
  • TypeScriptのヘッダファイルd.tsを管理してくれる。

ポイントと懺悔

• MVVMでViewModelの役割は、ViewとModelのbindingです。ビジネスロジックは極力Serviceにやらせましょう。
• テンプレートで頑張りすぎてはいけません。条件分岐はビジネスロジックですのでViewでやってはいけません。三項演算子で頑張りそうになったら、scopeにプロパティを作って、ViewModelから受け取るようにしましょう。
• ServiceやViewModelを自分でnewしてはいけません。自前でnewしたい時はViewModel間でやりとりしたい時だと思いますが、密結合になってしまいます。
• ViewModel間の連携はbroadcast/emitで行いましょう。
• $scopeになんでもぶち込んではいけません。$scopeはViewとViewModelの間にあるものなので、$scopeに置いていいものは、Model、ViewModelのプロパティ、ViewModelのメソッドです。間違ってもServiceやViewModelをぶち込んではいけません。

と、偉そうに書きましたが、全部僕がハマったポイントであります。申し訳ありません。

本当は全6エントリくらいにわたり詳細に解説しようかと思ったんですが、力尽きてやめた…。要望があれば考えます。