Angular

Angular2のオレオレアプリ向け雛型作りました。

Angular2Bootstrap

Angular2を使って素早くウィークエンドアプリを作るための雛型です。ほぼオフィシャルの機能を組み合わせただけなので、カスタマイズは簡単なはずです。

機能

angular-cliを採用しています。Scaffold偉大。
サンプルのルーティングとページ。追加も簡単です。
サンプルのHTTPリクエストサービス（初期状態でHacker News APIを叩いています）とその利用例。
アプリ全体で使い回す機能やデータを扱うためのAppServiceを定義しています。今はTitleタグを変更する仕事だけやっています。
SassとBootstrapでそこそこ見た目が整っています。Material Design Liteはクラス名が長くて好きじゃない。スタティックファイルを突っ込んでいるだけなので、他の好みがあれば簡単に変えられるはず。
GAタグとか細かいとこ。

依存ツール

angular-cli 簡単にインストールできます。

使い方

1 レポジトリのクローン

git clone https://github.com/YoshifumiShiiba/Angular2Bootstrap.git

2 npm install

cd Angular2Bootstrap
npm install

3 ng serve

ng serve

4 ブラウザで指定されたURLを開く

使い方と詳細

angular-cliについて

Angularプロジェクト謹製のオフィシャルコマンドラインツールです。各Scaffoldコマンド等詳細はリンク先のGitHubでどうぞ。

オフィシャルなので将来性的にも安心して使えるものの、生成した雛型がそのままでは何にも使えないくらい小さすぎたり、ルーティングが使われていなかったり、ロジックを実装し始めるまでのイニシャルがめんどくさいことこの上ない感じなので、今回これを製作した次第です。

ルーティングとページ

ルーティング超大事。デフォルトでPage1とPage2を持っています。Routesオブジェクト自体は/app/app.module.ts の中に定義してあります。

ページ追加

まずはコンポーネントを追加します。

ng g component page3

コンポーネントはAppModuleから自動でロードされるので、Routesにオブジェクトを追加して、ルーティング情報を追加します。

src/app/app.module.ts

const appRoutes: Routes = [
  { path: '', component: Page1Component },
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component },
  // New!
  { path: 'page3', component: Page3Component },
];

これだけで localhost:4200/page3 にアクセスできるようになります。素晴らしい。

ハッシュベースのルーティング

デフォルトでハッシュではなくURLベースのルーティングを使っています。ハッシュベースのルーティングが好みなら、下記のように書き換えればOKです。

src/app/app.module.ts

    RouterModule.forRoot(appRoutes, { useHash: true })

HTTPリクエストサービス

オフィシャルのドキュメントに従ってRxJSを採用しています。
/app/app-api.service.ts がサービス本体になっており、AppApiService内のgetHNTops()とgetHNItem()の2メソッドは挙動を確認するためのサンプルなので、基本的に消す必要があるかと思います。また、page1.component.ts のコントローラにてこのサービスを利用しているコードが入っているので、削除する必要があるかと思います。

ここではちょっとオリジナリティのあるコードを書いています。HTTPリクエスト周りとか外部リソースに依存するコードは、ちゃんと動いているやつを修正していった方が楽なんじゃないかと思ったのでカッとなってやった。

AppService

デフォルトでTitleタグを変更してくれているAppService。
/app/app.service.ts が本体です。Angular(1)にはデフォルトであったいわゆるrootScope的な、全体に関わる状態保持やメソッドを持たせようと思って作っています。

BootstrapとSass

そもそもプロジェクトがSassを使うように設定されているので、Scssとか他を使うのはちょっとめんどくさいことになるかもしれないです。Sass書けばいいんじゃないかな。
Bootstrapに深いこだわりがあるわけではないです。ないからBootstrapを使う。Material Design Liteはクラス名が長くて好きじゃない。
/styles.sass に一般的によく使うbootstrapのsass変数を置いてあります。いじるだけで結構戦えると思う。

GAタグとか細かいとこ

どうせやるんだから準備しておきました。

デプロイ

ng build

で、生成されたdistディレクトリの中身をアップロードしましょう。

デプロイの際には、存在しないリソースにアクセスした際に404ではなくindex.htmlを返すようにサーバを設定するといいでしょう。

Angular 2でサクッと週末開発をするための雛型兼サンプル（使い方追記）